syncfusion-vue-inline-ai-assist

Syncfusion Vue Inline AI Assist 组件

Inline AI Assist 组件是一款功能强大的 Syncfusion Vue 控件，旨在将 AI 驱动的功能直接集成到应用程序中。它提供智能文本处理功能，包括实时响应流式传输、可自定义提示词、命令弹出窗口和响应操作。借助基于直观弹出窗口的界面，用户可以通过此组件与 AI 服务无缝交互。

导航指南

开始使用

📄 阅读： references/getting-started.md

• 安装和软件包设置
• 基本组件集成
• CSS 主题导入和配置
• 运行基本示例

提示词配置

📄 阅读： references/prompt-configuration.md

• 设置和管理提示词文本
• 使用提示词-响应集合
• 处理提示词请求事件
• 根据响应动态处理提示词

命令设置与自定义

📄 阅读： references/command-settings.md

• 配置命令操作项
• 设置命令组和组织方式
• 添加图标、工具提示和禁用状态
• 处理命令选择事件

内联工具栏设置

📄 阅读： references/inline-toolbar-settings.md

• 配置内联工具栏项、位置（toolbarPosition）和行为
• 通过 itemClick 事件处理工具栏项点击，以执行响应或编辑器操作

语音转文本

📄 阅读： references/speech-to-text.md

• 使用 speechToTextSettings 通过浏览器的 Web Speech API 启用语音输入
• 配置语言（lang）、临时结果（allowInterimResults）、按钮和工具提示设置
• 处理识别生命周期事件：onStart、onStop、transcriptChanged、onError
• 检查浏览器兼容性和 HTTPS 要求

响应设置与操作

📄 阅读： references/response-settings.md

• 内置响应项（接受/丢弃）
• 添加自定义响应操作
• 响应项分组和自定义
• 响应操作事件处理

事件与方法

📄 阅读： references/events-and-methods.md

• 组件生命周期事件（created 事件）
• 提示词请求和响应事件处理
• 公共方法：addResponse()、showPopup()、hidePopup() 等
• 事件参数模式和用法

模板与本地化

📄 阅读： references/templates-and-localization.md

• 自定义页脚区域的编辑器模板
• 响应模板自定义选项
• 设置多语言本地化
• RTL 支持和文化适配

高级模式

📄 阅读： references/advanced-patterns.md

• 使用 relateTo 属性定位组件
• 弹出窗口大小和尺寸配置
• 与 contenteditable div 集成
• 常见工作流和边缘情况处理

快速入门示例

下面是一个在 Vue 中开始使用 Inline AI Assist 的最简示例：

<template>
  <div style="height: 350px; width: 650px; margin: 0 auto;">
    <br />
    <button @click="showPopup">Open Inline AI Assist</button>
    <div id="editableText" contenteditable="true" 
         style="min-height:80px; border:1px solid #ccc; padding:8px; margin-top:8px;">
      Editable content goes here.
    </div>
    <ejs-inlineaiassist 
      prompt="What are the benefits of AI?" 
      relate-to="#btn"
      popup-width="500px"
      :prompt-request="onPromptRequest"
      :response-settings="responseSettings"
      ref="inlineAiAssist">
    </ejs-inlineaiassist>
  </div>
</template>

<script setup>
import { InlineAIAssistComponent as EjsInlineaiassist } from "@syncfusion/ej2-vue-interactive-chat";
import { ref } from "vue";

let inlineAiAssist = ref(null);

const responseSettings = {
  itemSelect: (args) => {
    if (args.command.label === 'Accept') {
      const editable = document.getElementById('editableText');
      if (editable && inlineAiAssist.value?.prompts) {
        const lastResponse = inlineAiAssist.value.prompts[inlineAiAssist.value.prompts.length - 1].response;
        editable.innerHTML = '<p>' + lastResponse + '</p>';
      }
      inlineAiAssist.value?.hidePopup();
    } else if (args.command.label === 'Discard') {
      inlineAiAssist.value?.hidePopup();
    }
  }
};

const onPromptRequest = () => {
  setTimeout(() => {
    const defaultResponse = 'Connect to your AI service (OpenAI, Azure, etc.) to get real responses.';
    inlineAiAssist.value?.addResponse(defaultResponse);
  }, 1000);
};

const showPopup = () => {
  inlineAiAssist.value?.showPopup();
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/inline-ai-assist/index.css";
</style>

常见模式

模式 1：带响应处理程序的基本提示词

<ejs-inlineaiassist 
  prompt="Summarize this text"
  :prompt-request="handlePrompt"
  :response-settings="responseSettings">
</ejs-inlineaiassist>

触发组件显示提示词，并通过 prompt-request 事件处理响应。

模式 2：带分组的多个命令

const commandSettings = {
  commands: [
    { label: 'Summarize', prompt: 'Summarize', groupBy: 'Improve', iconCss: 'e-icons e-collapse-2' },
    { label: 'Shorten', prompt: 'Shorten', groupBy: 'Improve', iconCss: 'e-icons e-shorten' },
    { label: 'Translate', prompt: 'Translate', groupBy: 'Edit', iconCss: 'e-icons e-translate' }
  ],
  itemSelect: (args) => {
    // Handle command selection
  }
};

命令会按视觉方式分组，用户可从弹出窗口中选择操作。

模式 3：自定义响应操作

const responseSettings = {
  items: [
    { label: 'Regenerate', iconCss: 'e-icons e-refresh', groupBy: 'Actions' },
    { label: 'Copy', iconCss: 'e-icons e-copy', groupBy: 'Actions' },
    { label: 'Accept' },
    { label: 'Discard' }
  ],
  itemSelect: (args) => {
    // Handle response action
  }
};

使用内置和自定义操作项自定义响应弹出窗口。