syncfusion-javascript-ai-assistview

Syncfusion JavaScript AI AssistView 组件

概述

AI AssistView 是一个交互式聊天组件，专为构建 AI 驱动的对话界面而设计，支持提示词、响应、建议、自定义工具栏、文件附件、语音功能和 AI 服务集成。

AI AssistView 组件提供：

• 提示词-响应系统：显示包含用户提示词和 AI 响应的对话
• AI 服务集成：内置支持主流 AI 提供商（OpenAI、Gemini、Ollama 等）
• 工具栏自定义：可自定义页眉、页脚、提示词和响应工具栏中的项目
• 文件附件：上传文件并将其附加到提示词
• 语音功能：语音转文本输入和文本转语音输出
• 自定义视图：多种视图模式（Assist、Custom）和模板
• 模板：自定义横幅、提示词项目、响应项目、建议和页脚
• Markdown 支持：自动将 Markdown 转换为 HTML，以呈现响应
• 流式响应：实时流式传输 AI 输出响应
• 思维链：可折叠的思考/推理区块，通过 AssistThinking 模块提供分阶段、可流式传输的状态更新
• 生成式 UI：通过 blocks 和 registerToolUI 在 AI 响应中呈现交互式工具和动态 UI（卡片、图表、表单、自定义组件）
• 重新生成响应：通过内置的 e-assist-regenerate 工具栏项目，为现有提示词请求其他 AI 响应，并自动在已保存的响应之间进行上一条/下一条导航（regeneratedResponses）
• 遥测：内置遥测功能，可跟踪 AI 交互指标（status、duration、toolCalls、streamingChunks、model、inputTokens、outputTokens、totalTokens、reasoningTokens、cachedInputTokens 以及自定义属性），并为每条响应呈现带悬停提示报告的工具栏按钮；可通过 telemetrySettings（enable、metrics、beforeReport）进行全面配置
• 提及：在提示词编辑器中插入提及触发符（例如 @ 或 /），由本地或远程数据源（DataManager）提供支持；可配置字段、query、filterType（Contains/StartsWith/EndsWith）、匹配项高亮、弹出窗口尺寸以及自定义项目/显示/无记录模板；通过 mentionSelect 事件选择项目
• 响应动画：在生成 AI 响应时显示自定义加载指示器或动画，通过 responseAnimationTemplate 属性配置（字符串或返回 HTML 的函数），并持续显示，直到调用 addPromptResponse 且 promptRequest 返回的任何 Promise 完成
• 无障碍：符合 WCAG 标准，支持键盘导航和 ARIA

---

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 安装软件包和依赖项（@syncfusion/ej2-interactive-chat）
• CSS 导入和主题配置
• 初始化基本的 AI AssistView
• 首次呈现提示词和响应
• 通过 promptRequest 事件处理 AI 集成
• 配置宽度、高度、区域设置和持久化

Assist View 配置

📄 阅读： references/assist-view-configuration.md

• 设置提示词文本和占位符（prompt、promptPlaceholder）
• 自定义提示词和响应图标（promptIconCss、responseIconCss）
• 提示词-响应集合（prompts 属性与 PromptModel[]）
• 添加提示词建议（promptSuggestions、promptSuggestionsHeader）
• 显示/隐藏清除按钮和页眉（showClearButton、showHeader）
• 启用滚动到底部功能（enableScrollToBottom）
• 使用内置转换器呈现 Markdown 响应
• 响应流式传输（enableStreaming）

AI 服务集成

📄 阅读： references/ai-integrations.md

• OpenAI 和 Azure OpenAI 集成及 API 设置
• Google Gemini 集成与配置
• Ollama LLM 本地模型集成
• LiteLLM 代理服务集成
• Model Context Protocol 的 MCP 服务集成
• 自定义 AI 服务集成模式
• promptRequest 事件最佳实践
• 错误处理和响应格式化

思维链（思考块）

📄 阅读： references/chain-of-thoughts.md

• 通过可注入的 AssistThinking 模块启用推理可视化（AIAssistView.Inject(AssistThinking)）
• 响应块类型：blocks 数组中的 thinking、text、tool 块
• 配置思考块（blockType、title、content、isActive、collapsed、collapsible、stages）
• 添加基于 Timeline 渲染的推理阶段（ThinkingStage）
• 阶段状态指示器（completed、inprogress、failed），用于显示流式推理进度
• 行内可点击上下文徽章（editableContext、ThinkingContextItem），使用 {index} 占位符
• 处理 editableContextClicked 事件
• 自定义思考块渲染（blockTemplate）和阶段项渲染（itemTemplate）

生成式 UI

📄 阅读： references/generative-ui.md

• 使用 registerToolUI({ toolName, template, handler? }) 注册自定义工具
• 配置工具模板（字符串或函数）和交互处理程序
• 通过 addPromptResponse 向响应添加 tool 块（blockType: 'tool'、toolName、props）
• 在单个响应中混合使用 text 和 tool 块
• 配置 AI 服务的系统提示词，使其返回生成式 UI 所需的结构化 blocks JSON
• 多步骤生成式工作流：捕获工具状态，并通过 executePrompt 触发后续响应

工具栏配置

📄 阅读： references/toolbar-configuration.md

• 配置标题栏工具栏（toolbarSettings）
• 设置页脚工具栏（footerToolbarSettings，工具栏位置：Inline/Bottom）
• 响应工具栏项（responseToolbarSettings，点赞/点踩/复制/刷新）
• 提示词工具栏项（promptToolbarSettings）
• 自定义工具栏项（文本、图标、工具提示、对齐方式、模板）
• 工具栏项点击事件（ToolbarItemClickedEventArgs）
• 内置工具栏项（发送、附件）
• 通过内置的 e-assist-regenerate 响应工具栏项重新生成响应
• 使用 regeneratedResponses（PromptModel）预加载其他响应，并显示自动生成的上一个/下一个导航 UI

自定义视图

📄 阅读： references/custom-views.md

• 添加自定义视图（使用 AssistViewModel[] 的 views 属性）
• 视图类型：Assist 或 Custom（AssistViewType 枚举）
• 设置视图名称和图标（name、iconCss）
• 视图模板（用于自定义内容的 viewTemplate）
• 管理活动视图（activeView 属性）
• 以编程方式切换视图

模板

📄 阅读： references/templates.md

• 用于欢迎消息的横幅模板（bannerTemplate）
• 自定义提示词项模板（promptItemTemplate）
• 设置响应项模板格式（responseItemTemplate）
• 提示词建议项模板（promptSuggestionItemTemplate）
• 用于自定义输入区域的页脚模板（footerTemplate）
• 模板上下文和数据绑定
• 模板自定义示例

文件附件

📄 阅读： references/file-attachments.md

• 启用附件（enableAttachments）
• 附件设置（attachmentSettings，包括允许的类型、大小限制和最大数量）
• 上传配置（saveUrl、removeUrl）
• 提示词中的附件文件（PromptModel.attachedFiles）
• 附件事件（beforeUpload、success、failure、removed）
• 文件预览和点击处理
• 自定义附件模板（attachmentTemplate）

语音转文本

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

• 语音转文本配置（speechToTextSettings）
• 浏览器语音识别设置
• 语言和区域设置
• 按钮和工具提示自定义
• 中间结果和转录文本处理
• 麦克风权限和错误处理

文本转语音

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

• 通过 e-assist-audio 响应工具栏项启用内置文本转语音
• 语音合成配置（textToSpeechSettings）
• 自定义 language、speechPitch、speechRate、volume、voice 和 inputText
• 使用浏览器的 SpeechSynthesisUtterance 接口朗读 AI 响应
• 浏览器兼容性和功能检测

外观自定义

📄 阅读： references/appearance.md

• CSS 类自定义（cssClass）
• 宽度和高度配置
• RTL 支持（enableRtl）
• 使用 Syncfusion 主题自定义主题
• 自定义样式示例
• 响应式设计模式

方法和事件

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

• 方法：addPromptResponse()（可选的第二个参数 TelemetryData）、executePrompt()、scrollToBottom()、refresh()
• 事件：created、promptRequest、promptChanged、stopRespondingClick
• 附件事件：beforeAttachmentUpload、attachmentUploadSuccess、attachmentUploadFailure、attachmentRemoving（移除前钩子）、attachmentRemoved、attachmentClick
• 事件参数接口和使用模式
• 方法使用示例

遥测

📄 阅读： references/telemetry.md

• 通过 telemetrySettings.enable 启用遥测
• 内置的逐条响应遥测按钮（显示时长）和悬停工具提示报告
• 使用 telemetrySettings.metrics 和 TelemetryMetric 类型配置要采集的指标（status、duration、toolCalls、streamingChunks、model、inputTokens、outputTokens、totalTokens、reasoningTokens、cachedInputTokens）；数组顺序决定工具提示中的显示顺序
• 通过 telemetrySettings.beforeReport 事件和 TelemetryReport 自定义或抑制报告
• 通过 addPromptResponse 的 TelemetryData 参数传递 AI 使用数据（model、inputTokens、outputTokens、reasoningTokens、cachedInputTokens、customAttributes）
• 在工具提示中将自定义属性（region、tenant、sessionId、feature 等）显示为单独的行
• 关键行为：轮次追踪、禁用状态下的遥测按钮、时长格式化、自动计算 totalTokens、指标筛选优先级、重新生成流程

提及

📄 阅读： references/mentions.md

• 通过 mentions 数组配置提及触发字符（mentionChar，例如 @ 或 /）
• 提及项的数据源：本地集合或 DataManager（本地/远程）
• 字段映射（fields.text、fields.value、fields.iconCss）和其他数据操作（query）
• 筛选和匹配：filterType（Contains/StartsWith/EndsWith）和 highlight
• 已选提及项的显示：showMentionChar 和 displayTemplate
• 弹出窗口自定义：popupWidth、popupHeight、itemTemplate 和 noRecordsTemplate
• 通过 mentionSelect 事件处理用户选择

---

快速开始

基本 AI AssistView

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

enableRipple(true);

// Initialize AI AssistView
const aiAssistView: AIAssistView = new AIAssistView({
    promptSuggestions: [
        'How do I get started?',
        'What are the key features?'
    ],
    promptRequest: (args: PromptRequestEventArgs) => {
        // Handle prompt request - integrate with AI service here
        setTimeout(() => {
            const response = 'This is the AI response to: ' + args.prompt;
            aiAssistView.addPromptResponse(response);
        }, 1000);
    }
});

// Render to DOM
aiAssistView.appendTo('#aiAssistView');

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <title>AI AssistView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/fluent2.css" rel="stylesheet" />
</head>
<body>
    <div id='container' style="height: 400px; width: 700px;">
        <div id="aiAssistView"></div>
    </div>
</body>
</html>

CSS 导入

@import "../../node_modules/@syncfusion/ej2-fluent2-theme/styles/ai-assistview/index.css";

---

常见模式

模式 1：OpenAI 集成

const aiAssistView: AIAssistView = new AIAssistView({
    promptSuggestions: ['Explain AI', 'Code example', 'Best practices'],
    promptRequest: async (args: PromptRequestEventArgs) => {
        try {
            const response = await fetch('https://api.openai.com/v1/chat/completions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${OPENAI_API_KEY}`
                },
                body: JSON.stringify({
                    model: 'gpt-4',
                    messages: [{ role: 'user', content: args.prompt }]
                })
            });
            
            const data = await response.json();
            const aiResponse = data.choices[0].message.content;
            aiAssistView.addPromptResponse(aiResponse);
        } catch (error) {
            aiAssistView.addPromptResponse('Error: ' + error.message);
        }
    }
});

模式 2：支持流式传输的 Markdown 响应

const aiAssistView: AIAssistView = new AIAssistView({
    enableStreaming: true,
    promptRequest: (args: PromptRequestEventArgs) => {
        // Simulate streaming response
        const markdownResponse = `# Response\n\nThis is **bold** and *italic* text.\n\n- Item 1\n- Item 2\n\`\`\`javascript\nconst x = 10;\n\`\`\``;
        
        let index = 0;
        const interval = setInterval(() => {
            if (index < markdownResponse.length) {
                const chunk = markdownResponse.slice(0, index + 5);
                aiAssistView.addPromptResponse(chunk, false);
                index += 5;
            } else {
                clearInterval(interval);
                aiAssistView.addPromptResponse(markdownResponse, true);
            }
        }, 50);
    }
});

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

const aiAssistView: AIAssistView = new AIAssistView({
    responseToolbarSettings: {
        items: [
            { type: 'Button', iconCss: 'e-icons e-copy', tooltip: 'Copy' },
            { type: 'Button', iconCss: 'e-icons e-assist-like', tooltip: 'Like' },
            { type: 'Button', iconCss: 'e-icons e-assist-dislike', tooltip: 'Dislike' }
        ],
        itemClicked: (args: ToolbarItemClickedEventArgs) => {
            if (args.item.iconCss.includes('copy')) {
                // Copy response to clipboard
                const responseText = aiAssistView.prompts[args.dataIndex].response;
                navigator.clipboard.writeText(responseText);
            } else if (args.item.iconCss.includes('like')) {
                console.log('User liked the response');
            }
        }
    }
});

模式 4：思维链（流式推理）

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

AIAssistView.Inject(AssistThinking);

const aiAssistView: AIAssistView = new AIAssistView({
    promptRequest: (args: PromptRequestEventArgs) => {
        // Show an in-progress reasoning stage first
        aiAssistView.addPromptResponse({
            blocks: [{
                blockType: 'thinking',
                title: 'Understanding your request',
                isActive: true,
                collapsed: false,
                stages: [
                    { id: 'step1', status: 'inprogress', content: 'Analyzing the request…' }
                ]
            }]
        }, false); // isFinalUpdate: false while streaming

        // Later, mark the stage complete and append the final response
        setTimeout(() => {
            aiAssistView.addPromptResponse({
                blocks: [{
                    blockType: 'thinking',
                    title: 'Understanding your request',
                    isActive: false,
                    collapsed: true,
                    stages: [
                        { id: 'step1', status: 'completed', content: 'Analyzed the request.' }
                    ]
                }],
                response: 'Here is the final answer based on my reasoning.'
            }, true); // isFinalUpdate: true
        }, 1000);
    }
});

模式 5：生成式 UI（交互式工具卡片）

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

const aiAssistView: AIAssistView = new AIAssistView({
    promptRequest: onPromptRequest
});

// Register a tool BEFORE it's referenced in any response; toolName must be unique
aiAssistView.registerToolUI({
    toolName: 'weather-card',
    template: (props: any) => `
        <div class="e-card">
            <div class="e-card-header-title">${props.location}</div>
            <div class="e-card-sub-title">${props.temperature}</div>
        </div>
    `
});

function onPromptRequest(args: any) {
    setTimeout(() => {
        // Mix text and tool blocks in a single response
        aiAssistView.addPromptResponse({
            blocks: [
                { blockType: 'text', content: 'Here is the forecast:' },
                { blockType: 'tool', toolName: 'weather-card', props: { location: 'New York', temperature: '1°C / -4°C' } }
            ]
        });
    }, 1000);
}

aiAssistView.appendTo('#aiAssistView');

模式 6：文件附件

const aiAssistView: AIAssistView = new AIAssistView({
    enableAttachments: true,
    attachmentSettings: {
        allowedFileTypes: '.pdf,.docx,.txt,.jpg,.png',
        maxFileSize: 5242880, // 5MB
        maximumCount: 3,
        saveUrl: 'https://your-api.com/upload',
        removeUrl: 'https://your-api.com/remove'
    },
    promptRequest: (args: PromptRequestEventArgs) => {
        console.log('Attached files:', args.attachedFiles);
        // Process prompt with attached files
        aiAssistView.addPromptResponse('Received your prompt with attachments');
    }
});

模式 7：重新生成响应

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

let promptsData: PromptModel[] = [
    { prompt: "What is AI?", response: "AI stands for Artificial Intelligence..." }
];

const regenerateResponses: string[] = [
    "AI, or Artificial Intelligence, refers to the simulation of human intelligence in machines.",
    "Artificial Intelligence is the development of computer systems that perform human-like tasks."
];

const aiAssistView: AIAssistView = new AIAssistView({
    prompts: promptsData,
    responseToolbarSettings: {
        // e-assist-regenerate enables the built-in regenerate button
        items: [
            { type: 'Button', iconCss: 'e-icons e-assist-copy', tooltip: 'Copy' },
            { type: 'Button', iconCss: 'e-icons e-assist-regenerate', tooltip: 'Regenerate' }
        ]
    },
    promptRequest: (args: PromptRequestEventArgs) => {
        // Regenerate re-fires promptRequest with the existing prompt text
        setTimeout(() => {
            const response = regenerateResponses[Math.floor(Math.random() * regenerateResponses.length)];
            aiAssistView.addPromptResponse(response);
        }, 1000);
    }
});

模式 8：文本转语音（朗读）

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

const promptsData: PromptModel[] = [
    { prompt: "What is AI?", response: "AI stands for Artificial Intelligence..." }
];

const aiAssistView: AIAssistView = new AIAssistView({
    prompts: promptsData,
    responseToolbarSettings: {
        // e-assist-audio enables the built-in Read Aloud button
        items: [
            { type: 'Button', iconCss: 'e-icons e-assist-audio', tooltip: 'Read Aloud' },
            { type: 'Button', iconCss: 'e-icons e-assist-like', tooltip: 'Like' }
        ]
    },
    textToSpeechSettings: {
        language: 'en-US',
        speechPitch: 1,
        speechRate: 1,
        volume: 1
    },
    promptRequest: (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            aiAssistView.addPromptResponse('This response can be read aloud via the toolbar.');
        }, 1000);
    }
});

模式 9：遥测（跟踪 AI 交互指标）

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

// Enable telemetry and limit the report to a specific set/order of metrics
const aiAssistView: AIAssistView = new AIAssistView({
    promptSuggestions: [
        'How do I set achievable goals at work?',
        'Why do people fly in their dreams?'
    ],
    telemetrySettings: {
        enable: true,
        metrics: ['status', 'duration', 'model', 'inputTokens', 'outputTokens', 'totalTokens'] as TelemetryMetric[]
    },
    promptRequest: (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            const defaultResponse = 'For real-time prompt processing, connect the AIAssistView component to your preferred AI service.';
            // Attach AI usage details via the TelemetryData argument of addPromptResponse
            const telemetryData: TelemetryData = {
                model: 'gpt-4o',
                inputTokens: 128,
                outputTokens: 512,
                customAttributes: { region: 'us-east-1', tenant: 'acme' }
            };
            aiAssistView.addPromptResponse(defaultResponse, true, telemetryData);
        }, 1000);
    }
});

aiAssistView.appendTo('#aiAssistView');

模式 10：通过 beforeReport 自定义遥测报告

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

const aiAssistView: AIAssistView = new AIAssistView({
    promptSuggestions: [
        'How do I set achievable goals at work?',
        'Why do people fly in their dreams?'
    ],
    telemetrySettings: {
        enable: true,
        // Return the report (modified or not) to deliver it, or null to suppress it
        beforeReport: (report: TelemetryReport): TelemetryReport | null => {
            report.customAttributes = { region: 'us-east-1', tenant: 'acme', beta: true };
            return report;
        }
    },
    promptRequest: (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            aiAssistView.addPromptResponse('Response with custom telemetry attributes.');
        }, 1000);
    }
});

aiAssistView.appendTo('#aiAssistView');

模式 11：在提示词编辑器中提及

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

const agents: any[] = [
    { id: 'TechSupport', name: 'TechSupport' },
    { id: 'HRAssistant', name: 'HRAssistant' },
    { id: 'KnowledgeBase', name: 'KnowledgeBase' }
];

const aiAssistView: AIAssistView = new AIAssistView({
    promptPlaceholder: "Type '@' to mention an agent...",
    mentions: [
        {
            mentionChar: '@',
            dataSource: agents,
            fields: { text: 'name', value: 'id' },
            filterType: 'StartsWith',
            highlight: true,
            popupWidth: '250px',
            popupHeight: '200px'
        }
    ],
    promptRequest: (args: PromptRequestEventArgs) => {
        setTimeout(() => {
            aiAssistView.addPromptResponse('Processed mention from prompt: ' + args.prompt);
        }, 1000);
    }
});

aiAssistView.appendTo('#aiAssistView');

模式 12：多个提及触发符（Agent 和命令）

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

const agents: any[] = [
    { id: 'TechSupport', name: 'TechSupport', iconCss: 'e-icons e-comment-status' },
    { id: 'HRAssistant', name: 'HRAssistant', iconCss: 'e-icons e-people' }
];

const commands: any[] = [
    { id: 'table', name: '/table', description: 'Answer as a markdown table' },
    { id: 'rewrite', name: '/rewrite', description: 'Rewrite for clarity' }
];

const aiAssistView: AIAssistView = new AIAssistView({
    promptPlaceholder: "Type '@' for agents or '/' for commands...",
    mentions: [
        {
            mentionChar: '@',
            dataSource: agents,
            fields: { text: 'name', value: 'id', iconCss: 'iconCss' }
        },
        {
            mentionChar: '/',
            dataSource: commands,
            showMentionChar: false,
            fields: { text: 'name', value: 'id' },
            itemTemplate:
                '<div class="listItems">' +
                    '<span class="commandName">${name}</span>' +
                    '<span class="commandDesc">${description}</span>' +
                '</div>'
        }
    ],
    promptRequest: () => {
        setTimeout(() => aiAssistView.addPromptResponse('Mention processed.'), 1000);
    }
});

aiAssistView.appendTo('#aiAssistView');

模式 13：响应动画模板（加载指示器）

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

enableRipple(true);

const aiAssistView: AIAssistView = new AIAssistView({
    responseAnimationTemplate: responseAnimationContent,
    // Returning a Promise keeps the animation visible until the response is added
    promptRequest: (args: PromptRequestEventArgs) => {
        return new Promise<void>((resolve: () => void) => {
            setTimeout(() => {
                const defaultResponse = 'For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services.';
                aiAssistView.addPromptResponse(defaultResponse);
                resolve();
            }, 2000);
        });
    }
});

aiAssistView.appendTo('#aiAssistView');

function responseAnimationContent() {
    return `<div class="assistview-loading-status">
                <div class="assistview-grid-icon">
                    <span></span><span></span><span></span>
                    <span></span><span></span><span></span>
                    <span></span><span></span><span></span>
                </div>
                <span class="assistview-loading-label">Generating</span>
            </div>`;
}

模式 14：工具栏项目对齐方式

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

enableRipple(true);

// Use the `align` property on a toolbar item to position it within the toolbar
// (supported values: 'Left', 'Center', 'Right'; default is 'Left').
const aiAssistView: AIAssistView = new AIAssistView({
    toolbarSettings: {
        items: [ { iconCss: 'e-icons e-refresh', align: 'Right' } ],
    },
    promptRequest: () => {
        setTimeout(() => {
            aiAssistView.addPromptResponse('For real-time prompt processing, connect the AIAssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services.');
        }, 1000);
    }
});

aiAssistView.appendTo('#aiAssistView');

---

关键属性速查

属性	类型	描述
prompts	PromptModel[]	提示词-响应对集合
promptSuggestions	string[]	建议提示词数组
promptRequest	Event	用户提交提示词时触发的事件
enableStreaming	boolean	启用响应流式传输
enableAttachments	boolean	启用文件附件功能
views	AssistViewModel[]	自定义视图配置
toolbarSettings	ToolbarSettingsModel	标题工具栏配置
footerToolbarSettings	FooterToolbarSettingsModel	页脚工具栏配置
responseToolbarSettings	ResponseToolbarSettingsModel	响应工具栏配置
promptToolbarSettings	PromptToolbarSettingsModel	提示词工具栏配置
bannerTemplate	string | Function	自定义横幅模板
promptItemTemplate	string | Function	自定义提示词项目模板
responseItemTemplate	string | Function	自定义响应项目模板
responseAnimationTemplate	string | Function	生成响应时显示的自定义加载指示器或动画；在调用 addPromptResponse 且 promptRequest 返回的任何 Promise 完成之前始终可见
speechToTextSettings	SpeechToTextSettingsModel	语音转文本配置
textToSpeechSettings	TextToSpeechSettingsModel	文本转语音配置（language、speechPitch、speechRate、volume、voice、inputText）
blockTemplate	string | Function	用于呈现思考区块的自定义模板
itemTemplate	string | Function	用于呈现各个思考阶段项目的自定义模板
editableContextClicked	Event	点击可交互的内联上下文标记时触发
registerToolUI	Method	注册生成式 UI 工具（toolName、template、可选的 handler），以便通过 tool 区块呈现
telemetrySettings	TelemetrySettingsModel	配置 AI 交互遥测（enable、metrics、beforeReport），并为每个响应呈现内置遥测按钮，悬停时显示报告提示
addPromptResponse(response, isFinalUpdate?, telemetryData?)	Method	添加响应；启用遥测后，可选的 TelemetryData 参数会为报告提供 model、inputTokens、outputTokens、reasoningTokens、cachedInputTokens 和 customAttributes
mentions	MentionSettingsModel[]	配置提示词编辑器中的提及支持：mentionChar、dataSource、fields、query、filterType、highlight、showMentionChar、popupWidth、popupHeight、displayTemplate、itemTemplate、noRecordsTemplate
mentionSelect	Event	用户从提及建议弹出窗口中选择项目时触发（事件参数提供所选的 itemData）