@syncfusion/ej2-interactive-chat

v34.2.6

Published

16 hours ago

Essential JS 2 Component

JavaScript Interactive Chat Controls

Using this package with an AI coding agent
Before generating Syncfusion® code, ask your AI coding agent to run the Syncfusion® setup using the following prompt:
Set up this project for Syncfusion® before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com/agent-setup/prompt.md, then report the detected platform, installed skill pack, MCP status, and any required licensing action.
The setup detects your project’s platform and loads the appropriate Syncfusion® skill pack. No Syncfusion® account or MCP key is required to install or read Syncfusion® agent skills.
Platform reference: https://ai.syncfusion.com/javascript/llms.txt

A package of JavaScript controls for building conversational AI interfaces and chat applications. Includes AI AssistView, Chat UI and Inline AI Assist controls for seamless AI service integration.

What's Included in the JavaScript Interactive Chat Package

The JavaScript Interactive Chat package includes the following components.

JavaScript AI AssistView

The JavaScript AI AssistView control is a versatile and modern UI tool designed to seamlessly integrate AI services into your web applications. It enables users to send prompts, execute commands through a feature-rich toolbar, and effortlessly display AI-generated responses in a user-friendly interface.

Key features

Prompt Input: Enable users to send prompts and queries to AI services.
AI Response Display: Effortlessly display AI-generated responses in a user-friendly interface.
Built-in toolbars: Predefined toolbar items like copy, edit, and like/dislike for easy interaction with prompts and responses.
Prompt suggestions: Supports initial or on-demand prompt suggestions with a customizable header.
Header toolbar: Allows adding toolbar items in the header with options for executing custom commands.
Custom views: Extensive customization options for creating personalized views in addition to the built-in assist view.
Data Binding: Bind to local data, API responses, and observable collections.
Custom Templates: Rich templates for rendering prompts and responses.
Keyboard Navigation: Full keyboard support (Arrow keys, Enter, Escape) for accessibility.
Theming and Styling: Custom CSS, themes, and styling options for seamless integration.
Accessibility: Full keyboard navigation and ARIA support for screen readers.
Generative UI: Render structured AI responses, including text and interactive tools, in a rich conversational layout for an engaging user experience.
Thinking UI: Visualize AI workflow stages such as searching, processing, analyzing, and summarizing in real time to provide greater transparency into response generation.

Documentation:

JavaScript Chat UI

The JavaScript Chat UI control is a versatile and modern UI tool designed to seamlessly integrate conversational interfaces into your web applications. It enables users to send and receive messages with distinct visual styles, making it ideal for both user-to-user and user-to-AI chat experiences.

Key features

Interactive Conversations: Build responsive chat interfaces for user-AI interactions.
Message Display: Render user and AI messages with different visual styles.
AI Response Rendering: Display AI-generated responses in a user-friendly interface.
Data Binding: Support for arrays, API data, and observable collections.
Custom Templates: Rich templates for rendering messages and content.
Keyboard Navigation: Full keyboard support for accessibility.
Theming and Styling: Custom CSS, themes, and styling options for seamless integration.

Documentation:

JavaScript Inline AI Assist

The JavaScript Inline AI Assist control is a versatile, integrated AI-powered assistant for modern web applications. It enables users to prompt AI services and receive intelligent responses directly within their interface, with flexible display modes and extensive customization options.

Key features

Dual Response Modes: Display AI responses inline at the cursor position or in a popup overlay for flexible UI integration.
Command Actions: Display predefined commands and quick-action suggestions using mention-style popups with customizable grouping and icons via CommandMenu.
Response Actions: Configurable actions such as Accept, Discard, and custom items using ResponseActions to manage AI-generated content.
Action Toolbar: Includes a toolbar in the prompt input area with a send button and custom actions.
Markdown: Automatic conversion of Markdown responses to HTML for rich content rendering.
Streaming Responses: Supports word-by-word or chunk-based streaming with real-time visual feedback and stop controls.
Indicators: Shows processing states using inline indicators and skeleton loading in popup mode.
Customization: Supports customization of templates, appearance, and response rendering.

Documentation:

⚡️ Quick Start

The JavaScript Interactive Chat controls are easy to set up. Simply install the package, import the module, and add the desired control to your app.

Installation

To install the Interactive Chat package and its dependencies via npm, run the following command:

npm install @syncfusion/ej2-interactive-chat --save

Add the Theme CSS

Import the theme styles in your application's entry CSS/JS file:

@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";

Or, if using a bundler that supports CSS imports in JS:

import '@syncfusion/ej2-interactive-chat/styles/material.css';

AI AssistView

Add the Target Element

<!DOCTYPE html>
<html>
    <head>
        <!-- Includes all CSS for the AI AssistView -->
    </head>
    <body>
        <!-- Your AI AssistView container -->
        <div id="aiassist"></div>
    </body>
</html>

Import the Module

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

Initialize the Control

let aiAssistView = new AIAssistView({
    // Add options like promptSuggestions, headerToolbarSettings, etc. here
});
aiAssistView.appendTo('#aiassist');

Chat UI

Add the Target Element

<!DOCTYPE html>
<html>
    <head>
        <!-- Includes all CSS for the Chat UI -->
    </head>
    <body>
        <!-- Your Chat UI container -->
        <div id="chatui"></div>
    </body>
</html>

Import the Module

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

Initialize the Control

let currentUser = { id: 'user1', user: 'Albert' };
let otherUser = { id: 'user2', user: 'Michale Suyama' };

let chatUI = new ChatUI({
    user: currentUser,
    messages: [
        { text: 'Want to get coffee tomorrow?', author: currentUser },
        { text: 'Sure! What time?', author: otherUser },
        { text: 'How about 10 AM?', author: currentUser }
    ]
});
chatUI.appendTo('#chatui');

Inline AI Assist

Add the Target Elements

<!DOCTYPE html>
<html>
    <head>
        <!-- Includes all CSS for the Inline AI Assist -->
    </head>
    <body>
        <button id="openBtn">Open Inline AI Assist</button>
        <div id="inlineAssistTarget"></div>
        <div id="inlineaiassist"></div>
    </body>
</html>

Import the Module

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

Initialize the Control

let inlineAIAssist = new InlineAIAssist({
    relateTo: '#inlineAssistTarget',
    promptRequested: (args) => {
        setTimeout(() => {
            inlineAIAssist.updateResponse(
                'For real-time prompt processing, connect the Inline AI Assist control to your preferred AI service.'
            );
        }, 1000);
    }
});
inlineAIAssist.appendTo('#inlineaiassist');

document.getElementById('openBtn').addEventListener('click', () => {
    inlineAIAssist.showPopup();
});

Run the Application

Now, open your project in a browser, and the AI AssistView, Chat UI, and Inline AI Assist controls will be displayed! 🚀

ℹ️ Note: For more information on using Interactive Chat controls with Syncfusion, refer to our documentation:
AI AssistView Documentation
Chat UI Documentation
Inline AI Assist Documentation

Supported frameworks

Interactive chat controls are also offered in following list of frameworks.

| Angular | React | Vue | ASP.NET Core | ASP.NET MVC | | :-----: | :-----: | :-----: | :-----: | :-----: |

Resources

Support

Product support is available through the following mediums.

Support ticket - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
Community forum
GitHub issues
Request feature or report bug
Live chat

License and copyright

This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this control, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license for 140+ JavaScript UI controls, you can purchase or start a free 30-day trial.

A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

See LICENSE FILE for more info.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

JavaScript Interactive Chat Controls

What's Included in the JavaScript Interactive Chat Package

JavaScript AI AssistView

Key features

JavaScript Chat UI

Key features

JavaScript Inline AI Assist

Key features

⚡️ Quick Start

Installation

Add the Theme CSS

AI AssistView

Chat UI

Inline AI Assist

Run the Application

Supported frameworks

Resources

Support

License and copyright