syncfusion-react-inline-ai-assist

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion React Syncfusion React Inline AI Assist Component

Syncfusion React Inline AI Assist组件

Component Overview

组件概述

The Inline AI Assist component provides intelligent text processing capabilities for your React applications. It enables AI-powered suggestions, content generation, and interactive prompt-response workflows with support for multiple AI service integrations.

Inline AI Assist组件为你的React应用提供智能文本处理能力。它支持多AI服务集成，可实现AI驱动的建议、内容生成以及交互式提示-响应工作流。

Key Capabilities

核心功能

Multi-AI Service Integration: Connect to OpenAI, Google Gemini, Lite-LLM, and Ollama for flexible AI backend options
Real-Time Response Streaming: Enable
```
enableStreaming
```
for progressive response updates during content generation
Command & Response Actions: Configure predefined commands for quick AI tasks and custom response actions
Inline Toolbar: Add custom toolbar items with icons, buttons, and separators for enhanced user interactions
Inline & Popup Modes: Display AI responses inline with existing content or in a floating popup window
Flexible Template Customization: Customize prompt input and response display using string, function, or JSX templates
Internationalization (i18n) & RTL: Support for multiple languages and right-to-left text direction
Event Handling: Lifecycle events including
```
created
```
,
```
promptRequest
```
,
```
open
```
, and
```
close
```
for precise control
Public Methods: Programmatic access with
```
addResponse()
```
,
```
executePrompt()
```
,
```
showPopup()
```
, and more
Prompt History: Track prompt-response conversations with persistent history management
Accessibility & Theming: Compatible with Material, Bootstrap, Fluent, and Tailwind CSS themes

多AI服务集成：连接OpenAI、Google Gemini、Lite-LLM和Ollama，灵活选择AI后端
实时响应流：启用
```
enableStreaming
```
可在内容生成过程中逐步更新响应
命令与响应操作：配置预定义命令以快速完成AI任务，支持自定义响应操作
嵌入式工具栏：添加带有图标、按钮和分隔符的自定义工具栏项，增强用户交互
嵌入式与弹窗模式：AI响应可与现有内容内联显示，或在浮动弹窗中展示
灵活的模板自定义：使用字符串、函数或JSX模板自定义提示输入和响应显示
国际化（i18n）与RTL支持：支持多语言和从右到左的文本方向
事件处理：提供
```
created
```
、
```
promptRequest
```
、
```
open
```
和
```
close
```
等生命周期事件，实现精准控制
公共方法：通过
```
addResponse()
```
、
```
executePrompt()
```
、
```
showPopup()
```
等方法实现程序化访问
提示历史：通过持久化历史管理跟踪提示-响应对话
无障碍与主题支持：兼容Material、Bootstrap、Fluent和Tailwind CSS主题

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Installation via npm
CSS theme imports (Material, Bootstrap, Fluent, Tailwind)
Component rendering
Custom styling with
```
cssClass
```
property
Running your first example

📄 阅读： references/getting-started.md

通过npm安装
CSS主题导入（Material、Bootstrap、Fluent、Tailwind）
组件渲染
使用
```
cssClass
```
属性自定义样式
运行你的第一个示例

Template Customization

模板自定义

📄 Read: references/template-customization.md

```
editorTemplate
```
property: Customize prompt input area
```
responseTemplate
```
property: Customize response display
String templates, function templates, JSX.Element templates
Rich text editor integration
Voice input integration
Code syntax highlighting
Markdown rendering

📄 阅读： references/template-customization.md

```
editorTemplate
```
属性：自定义提示输入区域
```
responseTemplate
```
属性：自定义响应显示
字符串模板、函数模板、JSX.Element模板
富文本编辑器集成
语音输入集成
代码语法高亮
Markdown渲染

Internationalization (i18n) and RTL

国际化（i18n）与RTL支持

📄 Read: references/internationalization.md

```
locale
```
property: Set language and regional formatting
```
enableRtl
```
property: Enable right-to-left text direction
Available locale codes and setup
Arabic, Hebrew, Persian support
Multi-language applications
Browser language detection
Custom localization strings

📄 阅读： references/internationalization.md

```
locale
```
属性：设置语言和区域格式
```
enableRtl
```
属性：启用从右到左的文本方向
可用的区域代码及设置
阿拉伯语、希伯来语、波斯语支持
多语言应用
浏览器语言检测
自定义本地化字符串

Positioning and Targeting

定位与目标设置

📄 Read: references/positioning-and-targeting.md

```
relateTo
```
property: Position relative to DOM elements
```
target
```
property: Specify where to append the component
```
responseMode
```
property: Inline vs Popup display modes
Practical positioning scenarios

📄 阅读： references/positioning-and-targeting.md

```
relateTo
```
属性：相对于DOM元素定位
```
target
```
属性：指定组件的挂载目标
```
responseMode
```
属性：嵌入式 vs 弹窗显示模式
实用定位场景

Command Settings

命令设置

📄 Read: references/command-settings.md

Configure command items for quick actions
Command properties: id, label, iconCss, disabled, prompt, tooltip
Group commands with
```
groupBy
```
property
Handle
```
itemSelect
```
events
Set popup dimensions

📄 阅读： references/command-settings.md

配置命令项以实现快速操作
命令属性：id、label、iconCss、disabled、prompt、tooltip
使用
```
groupBy
```
属性对命令分组
处理
```
itemSelect
```
事件
设置弹窗尺寸

Response Settings

响应设置

📄 Read: references/response-settings.md

Built-in response items (accept, reject)
Adding custom response actions
Response item properties and configuration
Group response items with
```
groupBy
```
Handle response
```
itemSelect
```
events

📄 阅读： references/response-settings.md

内置响应项（接受、拒绝）
添加自定义响应操作
响应项属性与配置
使用
```
groupBy
```
对响应项分组
处理响应
```
itemSelect
```
事件

Inline Toolbar Customization

嵌入式工具栏自定义

📄 Read: references/inline-toolbar.md

Configure toolbar items (buttons, separators, inputs)
Built-in items and custom items
Item properties: text, iconCss, type, visible, disabled, align
Tab key navigation with
```
tabIndex
```
Custom item templates
Toolbar positioning: Inline vs Bottom
```
itemClick
```
event handling with complete event args

📄 阅读： references/inline-toolbar.md

配置工具栏项（按钮、分隔符、输入框）
内置项与自定义项
项属性：text、iconCss、type、visible、disabled、align
使用
```
tabIndex
```
实现Tab键导航
自定义项模板
工具栏定位：嵌入式 vs 底部
带有完整事件参数的
```
itemClick
```
事件处理

Events

事件

📄 Read: references/events.md

```
created
```
event: Component render complete
```
promptRequest
```
event: Prompt submitted by user
```
open
```
event: Popup opened
```
close
```
event: Popup closed
Event handler patterns and examples

📄 阅读： references/events.md

```
created
```
事件：组件渲染完成
```
promptRequest
```
事件：用户提交提示
```
open
```
事件：弹窗打开
```
close
```
事件：弹窗关闭
事件处理模式与示例

Methods

方法

📄 Read: references/methods.md

```
addResponse(response)
```
: Add AI response to component
```
executePrompt(prompt)
```
: Execute prompt dynamically
```
showPopup(coordinates)
```
: Open the popup
```
hidePopup()
```
: Close the popup
```
showCommandPopup()
```
: Show command actions
```
hideCommandPopup()
```
: Hide command actions

📄 阅读： references/methods.md

```
addResponse(response)
```
：向组件添加AI响应
```
executePrompt(prompt)
```
：动态执行提示
```
showPopup(coordinates)
```
：打开弹窗
```
hidePopup()
```
：关闭弹窗
```
showCommandPopup()
```
：显示命令操作
```
hideCommandPopup()
```
：隐藏命令操作

AI Service Integrations

AI服务集成

📄 Read: references/ai-integrations.md

```
enableStreaming
```
property: Real-time response streaming
OpenAI API integration with streaming
Google Gemini AI integration with streaming
Lite-LLM service integration
Ollama local LLM integration with streaming
API credential setup
Prompt handling and response streaming
Performance optimization and error handling

📄 阅读： references/ai-integrations.md

```
enableStreaming
```
属性：实时响应流
带流功能的OpenAI API集成
带流功能的Google Gemini AI集成
Lite-LLM服务集成
带流功能的Ollama本地LLM集成
API凭证设置
提示处理与响应流
性能优化与错误处理

Quick Start

快速开始

jsx

import { InlineAIAssistComponent } from '@syncfusion/ej2-react-interactive-chat';
import React from 'react';

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

    const handlePromptRequest = () => {
        // Simulate AI response
        setTimeout(() => {
            const response = 'Your AI-generated response here';
            assistRef.current?.addResponse(response);
        }, 1000);
    };

    const handleShowPopup = () => {
        assistRef.current?.showPopup();
    };

    return (
        <div>
            <button onClick={handleShowPopup} className="e-btn e-primary">
                Ask AI
            </button>
            <InlineAIAssistComponent
                id="inlineAssist"
                ref={assistRef}
                relateTo="button"
                promptRequest={handlePromptRequest}
                popupWidth="500px"
            />
        </div>
    );
}

export default App;

jsx

import { InlineAIAssistComponent } from '@syncfusion/ej2-react-interactive-chat';
import React from 'react';

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

    const handlePromptRequest = () => {
        // Simulate AI response
        setTimeout(() => {
            const response = 'Your AI-generated response here';
            assistRef.current?.addResponse(response);
        }, 1000);
    };

    const handleShowPopup = () => {
        assistRef.current?.showPopup();
    };

    return (
        <div>
            <button onClick={handleShowPopup} className="e-btn e-primary">
                Ask AI
            </button>
            <InlineAIAssistComponent
                id="inlineAssist"
                ref={assistRef}
                relateTo="button"
                promptRequest={handlePromptRequest}
                popupWidth="500px"
            />
        </div>
    );
}

export default App;

Common Patterns

常见模式

Pattern 1: AI-Assisted Text Editing

模式1：AI辅助文本编辑

Combine the component with a contentEditable div to enable AI-powered suggestions while editing:

jsx

const handleResponseItemSelect = (args) => {
    if (args.command.label === 'Accept') {
        const lastResponse = assistRef.current.prompts?.[assistRef.current.prompts.length - 1]?.response;
        if (lastResponse && editableRef.current) {
            editableRef.current.innerHTML = lastResponse;
        }
    }
};

<InlineAIAssistComponent
    responseSettings={{
        itemSelect: handleResponseItemSelect
    }}
/>

将组件与contentEditable div结合，实现AI驱动的编辑建议：

jsx

const handleResponseItemSelect = (args) => {
    if (args.command.label === 'Accept') {
        const lastResponse = assistRef.current.prompts?.[assistRef.current.prompts.length - 1]?.response;
        if (lastResponse && editableRef.current) {
            editableRef.current.innerHTML = lastResponse;
        }
    }
};

<InlineAIAssistComponent
    responseSettings={{
        itemSelect: handleResponseItemSelect
    }}
/>

Pattern 2: Command-Based Actions

模式2：基于命令的操作

Set up predefined commands for common AI tasks:

jsx

const commandSettings = {
    commands: [
        { id: 'summarize', label: 'Summarize', iconCss: 'e-icons e-compress', prompt: 'Summarize this text' },
        { id: 'expand', label: 'Expand', iconCss: 'e-icons e-expand', prompt: 'Expand this text' },
        { id: 'fix', label: 'Fix Grammar', iconCss: 'e-icons e-check-box', prompt: 'Fix grammar and spelling' }
    ]
};

<InlineAIAssistComponent commandSettings={commandSettings} />

为常见AI任务设置预定义命令：

jsx

const commandSettings = {
    commands: [
        { id: 'summarize', label: 'Summarize', iconCss: 'e-icons e-compress', prompt: 'Summarize this text' },
        { id: 'expand', label: 'Expand', iconCss: 'e-icons e-expand', prompt: 'Expand this text' },
        { id: 'fix', label: 'Fix Grammar', iconCss: 'e-icons e-check-box', prompt: 'Fix grammar and spelling' }
    ]
};

<InlineAIAssistComponent commandSettings={commandSettings} />

Pattern 3: Custom Toolbar Actions

模式3：自定义工具栏操作

Add custom toolbar items to trigger component methods:

jsx

const handleToolbarItemClick = (args) => {
    if (args.item.id === 'customAction') {
        assistRef.current?.executePrompt('User-defined prompt');
    }
};

const inlineToolbarSettings = {
    items: [
        { id: 'customAction', text: 'Custom', iconCss: 'e-icons e-settings' }
    ],
    itemClick: handleToolbarItemClick
};

添加自定义工具栏项以触发组件方法：

jsx

const handleToolbarItemClick = (args) => {
    if (args.item.id === 'customAction') {
        assistRef.current?.executePrompt('User-defined prompt');
    }
};

const inlineToolbarSettings = {
    items: [
        { id: 'customAction', text: 'Custom', iconCss: 'e-icons e-settings' }
    ],
    itemClick: handleToolbarItemClick
};

Pattern 4: Response Display Modes

模式4：响应显示模式

Switch between inline editing and popup responses:

jsx

// Inline mode: Response appears inline
<InlineAIAssistComponent responseMode="Inline" />

// Popup mode: Response in floating popup
<InlineAIAssistComponent responseMode="Popup" popupWidth="400px" />

在嵌入式编辑与弹窗响应之间切换：

jsx

// 嵌入式模式：响应内联显示
<InlineAIAssistComponent responseMode="Inline" />

// 弹窗模式：响应在浮动弹窗中显示
<InlineAIAssistComponent responseMode="Popup" popupWidth="400px" />

Pattern 5: Lifecycle Management

模式5：生命周期管理

Use events to coordinate component state:

jsx

const handleCreated = () => {
    console.log('Component initialized');
};

const handlePromptRequest = (args) => {
    console.log('Prompt submitted:', args.prompt);
};

<InlineAIAssistComponent
    created={handleCreated}
    promptRequest={handlePromptRequest}
    open={() => console.log('Popup opened')}
    close={() => console.log('Popup closed')}
/>

使用事件协调组件状态：

jsx

const handleCreated = () => {
    console.log('Component initialized');
};

const handlePromptRequest = (args) => {
    console.log('Prompt submitted:', args.prompt);
};

<InlineAIAssistComponent
    created={handleCreated}
    promptRequest={handlePromptRequest}
    open={() => console.log('Popup opened')}
    close={() => console.log('Popup closed')}
/>

Key Configuration Properties

关键配置属性

Property	Type	Default	Purpose
`editorTemplate`	string \| function \| JSX.Element	''	Custom prompt input template
`responseTemplate`	string \| function \| JSX.Element	''	Custom response display template
`enableStreaming`	boolean	false	Enable real-time response streaming
`locale`	string	'en-US'	Language and regional formatting
`enableRtl`	boolean	false	Enable right-to-left text direction
`enablePersistence`	boolean	false	Persist component state across reloads
`cssClass`	string	''	Custom CSS classes for styling
`relateTo`	string \| HTMLElement	-	Position component relative to element
`target`	string \| HTMLElement	'body'	Specify append target
`responseMode`	string	'Popup'	'Inline' or 'Popup'
`popupWidth`	string \| number	'400px'	Popup width (CSS value)
`popupHeight`	string \| number	'auto'	Popup height
`zIndex`	number	1000	Popup z-index
`placeholder`	string	'Ask or generate AI content..'	Prompt textarea placeholder
`prompt`	string	''	Default prompt text
`prompts`	array	[]	Prompt-response collection
`commandSettings`	CommandSettingsModel	null	Command configuration
`responseSettings`	ResponseSettingsModel	null	Response action configuration
`inlineToolbarSettings`	InlineToolbarSettingsModel	null	Toolbar customization

For complete examples and advanced scenarios, explore individual reference files above.

属性	类型	默认值	用途
`editorTemplate`	string \| function \| JSX.Element	''	自定义提示输入模板
`responseTemplate`	string \| function \| JSX.Element	''	自定义响应显示模板
`enableStreaming`	boolean	false	启用实时响应流
`locale`	string	'en-US'	语言与区域格式
`enableRtl`	boolean	false	启用从右到左的文本方向
`enablePersistence`	boolean	false	在页面重载时持久化组件状态
`cssClass`	string	''	用于样式自定义的CSS类
`relateTo`	string \| HTMLElement	-	相对于指定元素定位组件
`target`	string \| HTMLElement	'body'	指定组件挂载目标
`responseMode`	string	'Popup'	可选值：'Inline'或'Popup'
`popupWidth`	string \| number	'400px'	弹窗宽度（CSS值）
`popupHeight`	string \| number	'auto'	弹窗高度
`zIndex`	number	1000	弹窗层级
`placeholder`	string	'Ask or generate AI content..'	提示文本框占位符
`prompt`	string	''	默认提示文本
`prompts`	array	[]	提示-响应集合
`commandSettings`	CommandSettingsModel	null	命令配置
`responseSettings`	ResponseSettingsModel	null	响应操作配置
`inlineToolbarSettings`	InlineToolbarSettingsModel	null	工具栏自定义配置

如需完整示例和高级场景，请探索上述各参考文档。