Syncfusion AI Assistant

How can I help you?

Assist view in React AI AssistView component

18 Mar 202624 minutes to read

Setting prompt text

The prompt property allows you to define initial or default text that appears in the prompt input area. This property is useful for pre-filling the input with context or guidance for users.

import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const assistInstance = React.useRef(null);
    
    const onPromptRequest = (args) => {
        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.';
            assistInstance.current.addPromptResponse(defaultResponse);
          }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} prompt={'What tools or apps can help me prioritize tasks?'}></AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));
import { AIAssistViewComponent, PromptRequestEventArgs } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {

    const assistInstance = React.useRef<AIAssistViewComponent>(null);
    
    const onPromptRequest = (args: PromptRequestEventArgs) => {
        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.';
            assistInstance.current.addPromptResponse(defaultResponse);
          }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} prompt={'What tools or apps can help me prioritize tasks?'}></AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

Setting prompt placeholder

The promptPlaceholder property defines the placeholder text displayed in the prompt textarea when it’s empty. The default placeholder text is Type prompt for assistance....

import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const assistInstance = React.useRef(null);
    
    const onPromptRequest = (args) => {
        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.';
            assistInstance.current.addPromptResponse(defaultResponse);
          }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} promptPlaceholder={'Type a message...'}></AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));
import { AIAssistViewComponent, PromptRequestEventArgs } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {

    const assistInstance = React.useRef<AIAssistViewComponent>(null);
    
    const onPromptRequest = (args: PromptRequestEventArgs) => {
        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.';
            assistInstance.current.addPromptResponse(defaultResponse);
          }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} promptPlaceholder={'Type a message...'}></AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

Prompt-response collection

The prompts property enables you to initialize the component with pre-configured conversation data or retrieve the complete history of user interactions.

The prompts collection automatically stores all user inputs and corresponding AI responses generated during the session, providing a complete conversation history that can be accessed programmatically.

import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const assistInstance = React.useRef(null);

    const prompts = [
        {
            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>"
        }
    ];
    
    const onPromptRequest = (args) => {
        setTimeout(() => {
            let foundPrompt = prompts.find((promptObj) => promptObj.prompt === args.prompt);
            let defaultResponse = 'For real-time prompt processing, connect the AI AssistView 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.';
            assistInstance.current.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} prompts={prompts}></AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));
import { AIAssistViewComponent, PromptRequestEventArgs, PromptModel } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {

    const assistInstance = React.useRef<AIAssistViewComponent>(null);
  
    const prompts: PromptModel[] = [
        {
            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>"
        }
    ];
    
    const onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            let foundPrompt = prompts.find((promptObj) => promptObj.prompt === args.prompt);
            let defaultResponse = 'For real-time prompt processing, connect the AI AssistView 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.';
            assistInstance.current.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} prompts={prompts}></AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

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 { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const assistInstance = React.useRef(null);

    const markdownData = [
        {
            prompt: "What is Markdown?",
            response: `<div>
                        <h1>Markdown Guide</h1>
                        <p>Markdown is a lightweight markup language:</p>
                        <ul>
                            <li><strong>Headers:</strong> Use <code>#</code>, <code>##</code>, <code>###</code></li>
                            <li><strong>Bold:</strong> <code>**text**</code> for bold</li>
                            <li><strong>Italic:</strong> <code>*text*</code> for italic</li>
                            <li><strong>Code:</strong> Triple backticks for code blocks</li>
                            <li><strong>Lists:</strong> Use <code>-</code> for bullet points</li>
                        </ul>
                        <p>It's simple and perfect for documentation.</p>
                        </div>`,
            suggestions: ["How do I use bold?", "Show code block example"]
        },
        {
            prompt: "How do I use bold?",
            response: `<div>
                        <h1>Bold Text in Markdown</h1>
                        <p>Use double asterisks <code>**text**</code> or double underscores <code>__text__</code>:</p>
                        <p><strong>This is bold text</strong></p>
                        <p>Both methods produce the same result.</p>
                        </div>`,
            suggestions: ["What is Markdown?", "Show code block example"]
        }
    ];

    const defaultSuggestions = [
        "What is Markdown?",
        "How do I use bold?",
        "Show code block example"
    ];

    const onPromptRequest = (args) => {
        setTimeout(() => {
            const found = markdownData.find(item => item.prompt === args.prompt);
            
            const defaultResponse = 
                'For real-time Markdown help or more advanced questions, connect this component to an actual AI model (OpenAI, Gemini, Claude, etc.).';

            // Add the response (HTML string)
            assistInstance.current.addPromptResponse(
                found ? found.response : defaultResponse
            );

            // Update suggestions dynamically
            assistInstance.current.promptSuggestions = 
                found && found.suggestions ? found.suggestions : defaultSuggestions;
        }, 1200);
    };

    return (
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} promptSuggestions={defaultSuggestions}/>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));
import { AIAssistViewComponent, PromptRequestEventArgs, PromptModel } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const assistInstance = React.useRef<AIAssistViewComponent>(null);

    const markdownData: PromptModel[] = [
        {
            prompt: "What is Markdown?",
            response: `<div>
                        <h1>Markdown Guide</h1>
                        <p>Markdown is a lightweight markup language:</p>
                        <ul>
                            <li><strong>Headers:</strong> Use <code>#</code>, <code>##</code>, <code>###</code></li>
                            <li><strong>Bold:</strong> <code>**text**</code> for bold</li>
                            <li><strong>Italic:</strong> <code>*text*</code> for italic</li>
                            <li><strong>Code:</strong> Triple backticks for code blocks</li>
                            <li><strong>Lists:</strong> Use <code>-</code> for bullet points</li>
                        </ul>
                        <p>It's simple and perfect for documentation.</p>
                        </div>`,
            suggestions: ["How do I use bold?", "Show code block example"]
        },
        {
            prompt: "How do I use bold?",
            response: `<div>
                        <h1>Bold Text in Markdown</h1>
                        <p>Use double asterisks <code>**text**</code> or double underscores <code>__text__</code>:</p>
                        <p><strong>This is bold text</strong></p>
                        <p>Both methods produce the same result.</p>
                        </div>`,
            suggestions: ["What is Markdown?", "Show code block example"]
        }
    ];

    const defaultSuggestions: string[] = [
        "What is Markdown?",
        "How do I use bold?",
        "Show code block example"
    ];

    const onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            const found = markdownData.find(item => item.prompt === args.prompt);
            
            const defaultResponse = 
                'For real-time Markdown help or more advanced questions, connect this component to an actual AI model (OpenAI, Gemini, Claude, etc.).';

            assistInstance.current.addPromptResponse(
                found ? found.response : defaultResponse
            );

            assistInstance.current.promptSuggestions = 
                found && found.suggestions ? found.suggestions : defaultSuggestions;
        }, 1200);
    };

    return (
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} promptSuggestions={defaultSuggestions}/>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

Configuring prompt suggestions

The promptSuggestions property provides users with helpful suggestions that can appear initially or on-demand. These suggestions help users formulate better prompts and discover available functionality, enhancing the overall user experience.

import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const assistInstance = React.useRef(null);

    const promptSuggestions = [
        "Best practices for clean, maintainable code?",
        "How to optimize code editor for speed?"
    ];
    
    const onPromptRequest = (args) => {
        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.';
            assistInstance.current.addPromptResponse(args.prompt === assistInstance.current.promptSuggestions[0] ? response1 : args.prompt === assistInstance.current.promptSuggestions[1] ? response2 : defaultResponse);
        }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} promptSuggestions={promptSuggestions}></AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));
import { AIAssistViewComponent,PromptRequestEventArgs } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {

    const assistInstance = React.useRef<AIAssistViewComponent>(null);
  
    const promptSuggestions: string[] = [
        "Best practices for clean, maintainable code?",
        "How to optimize code editor for speed?"
    ];
    
    const onPromptRequest = (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.';
            assistInstance.current.addPromptResponse(args.prompt === assistInstance.current.promptSuggestions[0] ? response1 : args.prompt === assistInstance.current.promptSuggestions[1] ? response2 : defaultResponse);
        }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} promptSuggestions={promptSuggestions}></AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

Customizing suggestions header

The promptSuggestionsHeader property allows you to set a descriptive header text that appears above the prompt suggestions.

import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const assistInstance = React.useRef(null);

    const promptSuggestions = [
        "Best practices for clean, maintainable code?",
        "How to optimize code editor for speed?"
    ];
    
    const onPromptRequest = (args) => {
        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.';
            assistInstance.current.addPromptResponse(args.prompt === assistInstance.current.promptSuggestions[0] ? response1 : args.prompt === assistInstance.current.promptSuggestions[1] ? response2 : defaultResponse);
        }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} promptSuggestions={promptSuggestions} promptSuggestionsHeader='Suggested Prompts'></AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));
import { AIAssistViewComponent,PromptRequestEventArgs } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {

    const assistInstance = React.useRef<AIAssistViewComponent>(null);
  
    const promptSuggestions: string[] = [
        "Best practices for clean, maintainable code?",
        "How to optimize code editor for speed?"
    ];
    
    const onPromptRequest = (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.';
            assistInstance.current.addPromptResponse(args.prompt === assistInstance.current.promptSuggestions[0] ? response1 : args.prompt === assistInstance.current.promptSuggestions[1] ? response2 : defaultResponse);
        }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} promptSuggestions={promptSuggestions} promptSuggestionsHeader='Suggested Prompts'></AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

Customizing user avatar appearance

The promptIconCss property enables customization of the user avatar icon that appears alongside user prompts.

import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const assistInstance = React.useRef(null);

    const prompts = [
        {
            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>"
        }
    ];
    
    const onPromptRequest = (args) => {
        setTimeout(() => {
            let foundPrompt = prompts.find((promptObj) => promptObj.prompt === args.prompt);
            let defaultResponse = 'For real-time prompt processing, connect the AI AssistView 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.';
            assistInstance.current.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} prompts={prompts} promptIconCss='e-icons e-user'></AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));
import { AIAssistViewComponent,PromptRequestEventArgs, PromptModel } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {

    const assistInstance = React.useRef<AIAssistViewComponent>(null);
  
    const prompts: PromptModel[] = [
        {
            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>"
        }
    ];
    
    const onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            let foundPrompt = prompts.find((promptObj) => promptObj.prompt === args.prompt);
            let defaultResponse = 'For real-time prompt processing, connect the AI AssistView 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.';
            assistInstance.current.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} prompts={prompts} promptIconCss='e-icons e-user'></AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

Adding response iconCss

The responseIconCss property allows customization of the AI assistant avatar that appears alongside AI responses. By default, the e-assistview-icon class is added as the built-in AI AssistView response icon.

import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const assistInstance = React.useRef(null);

    const prompts = [
        {
            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>"
        }
    ];
    
    const onPromptRequest = (args) => {
        setTimeout(() => {
            let foundPrompt = prompts.find((promptObj) => promptObj.prompt === args.prompt);
            let defaultResponse = 'For real-time prompt processing, connect the AI AssistView 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.';
            assistInstance.current.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} prompts={prompts} responseIconCss='e-icons e-bullet-4'></AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));
import { AIAssistViewComponent,PromptRequestEventArgs, PromptModel } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {

    const assistInstance = React.useRef<AIAssistViewComponent>(null);
  
    const prompts: PromptModel[] = [
        {
            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>"
        }
    ];
    
    const onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            let foundPrompt = prompts.find((promptObj) => promptObj.prompt === args.prompt);
            let defaultResponse = 'For real-time prompt processing, connect the AI AssistView 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.';
            assistInstance.current.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} prompts={prompts} responseIconCss='e-icons e-bullet-4'></AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

Show or hide clear button

The showClearButton property controls the visibility of the clear button in the prompt input area. By default, its value is false, When the clear button is clicked, only the current prompt text is cleared, while the conversation history remains intact.

import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const assistInstance = React.useRef(null);
    
    const onPromptRequest = (args) => {
        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.';
            assistInstance.current.addPromptResponse(defaultResponse);
          }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} prompt={'What tools or apps can help me prioritize tasks?'} showClearButton={true}></AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));
import { AIAssistViewComponent, PromptRequestEventArgs } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {

    const assistInstance = React.useRef<AIAssistViewComponent>(null);
    
    const onPromptRequest = (args: PromptRequestEventArgs) => {
        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.';
            assistInstance.current.addPromptResponse(defaultResponse);
          }, 1000);
    };
  
    return (
        // specifies the tag for render the AI AssistView component
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} prompt={'What tools or apps can help me prioritize tasks?'} showClearButton={true}></AIAssistViewComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));

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 { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const assistInstance = React.useRef(null);

    const prompts = [
        {
            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>`
        }
    ];

    const suggestion = [
        "What tools or apps can help me prioritize tasks?",
        "How do I manage multiple projects effectively?"
    ];

    const onPromptRequest = (args) => {
        setTimeout(() => {
            const foundPrompt = prompts.find((promptObj) => promptObj.prompt === args.prompt);
            const defaultResponse = 'For real-time prompt processing, connect the AI AssistView 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.';
            assistInstance.current.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 1000);
    };

    return (
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} prompts={prompts} promptSuggestions={suggestion}/>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));
import { 
    AIAssistViewComponent, 
    PromptRequestEventArgs, 
    PromptModel 
} from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const assistInstance = React.useRef<AIAssistViewComponent>(null);

    const prompts: 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>`
        }
    ];

    const suggestion: string[] = [
        "What tools or apps can help me prioritize tasks?",
        "How do I manage multiple projects effectively?"
    ];

    const onPromptRequest = (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            const foundPrompt = prompts.find((promptObj) => promptObj.prompt === args.prompt);
            const defaultResponse = 'For real-time prompt processing, connect the AI AssistView 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.';
            assistInstance.current.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
        }, 1000);
    };

    return (
        <AIAssistViewComponent id="aiAssistView" ref={assistInstance} promptRequest={onPromptRequest} prompts={prompts} promptSuggestions={suggestion}/>
    );
}

ReactDOM.render(<App />, document.getElementById('container'));