Back to Details

syncfusion-blazor-smart-textarea

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Syncfusion Blazor Smart TextArea

Syncfusion Blazor Smart TextArea

AI-powered text input component that provides context-aware autocompletion suggestions inline or in a popup, driven by OpenAI, Azure OpenAI, Ollama, or custom AI backends.
一款基于AI的文本输入组件，可由OpenAI、Azure OpenAI、Ollama或自定义AI后端驱动，提供上下文感知的内联或弹窗式自动补全建议。

When to Use

适用场景

Use this skill when you need to:
  • Add 
    SfSmartTextArea
    to a Blazor Web App for AI-assisted text input
  • Configure OpenAI, Azure OpenAI, Ollama, or a custom 
    IChatInferenceService
  • Switch between inline and popup suggestion display modes
  • Tune suggestions with 
    UserRole
    and 
    UserPhrases
    context
  • Implement a custom AI backend for Claude, DeepSeek, Groq, Gemini, etc.
  • Troubleshoot missing suggestions or AI connectivity issues
Do NOT use for:
  • General Blazor project setup → use 
    syncfusion-blazor-common
  • Smart Paste Button (clipboard-to-form filling) → use 
    syncfusion-blazor-smart-paste
当你需要以下功能时，可以使用该技能：
  • 为Blazor Web App添加
    SfSmartTextArea
    以实现AI辅助文本输入
  • 配置OpenAI、Azure OpenAI、Ollama或自定义
    IChatInferenceService
  • 在內联和弹窗式建议显示模式之间切换
  • 通过
    UserRole
    和
    UserPhrases
    上下文调整建议内容
  • 为Claude、DeepSeek、Groq、Gemini等实现自定义AI后端
  • 排查建议不显示或AI连接问题
不适用场景：
  • 通用Blazor项目设置 → 请使用
    syncfusion-blazor-common
  • 智能粘贴按钮（剪贴板到表单填充）→ 请使用
    syncfusion-blazor-smart-paste

Prerequisites

前置条件

  • Blazor Web App (.NET 8.0+) with Interactive Server render mode
  • Visual Studio 2022 or Visual Studio Code
  • Active OpenAI / Azure OpenAI account, Ollama instance, or custom AI backend
  • Basic knowledge of Blazor and C#
  • 采用Interactive Server渲染模式的Blazor Web App（.NET 8.0+）
  • Visual Studio 2022 或 Visual Studio Code
  • 有效的OpenAI/Azure OpenAI账户、Ollama实例或自定义AI后端
  • 具备Blazor和C#的基础知识

Core Documentation

核心文档

1. Getting Started with Smart TextArea

1. Smart TextArea 快速入门

Complete setup guide including prerequisites, NuGet package installation, service registration, and component implementation.
→ Full Getting Started Guide
Key Topics:
  • Creating a new Blazor Web App
  • Registering Syncfusion services
  • Configuring AI services (OpenAI, Azure OpenAI, Ollama)
  • Adding stylesheets and scripts
  • Implementing the first Smart TextArea component
完整的设置指南，包括前置条件、NuGet包安装、服务注册和组件实现。
→ 完整快速入门指南
核心主题：
  • 创建新的Blazor Web App
  • 注册Syncfusion服务
  • 配置AI服务（OpenAI、Azure OpenAI、Ollama）
  • 添加样式表和脚本
  • 实现第一个Smart TextArea组件

2. Customization and Features

2. 自定义与功能特性

Guidance on customizing suggestion appearance and leveraging inherited TextArea features.
→ Full Customization & Features Guide
Key Topics:
  • Popup vs inline suggestion display modes
  • UserRole and UserPhrases configuration
  • Inherited TextArea features (forms, floating labels, events, methods, styling)
  • Best practices and complete examples
关于自定义建议外观以及利用继承自TextArea的功能的指南。
→ 完整自定义与功能指南
核心主题：
  • 弹窗式与内联式建议显示模式
  • UserRole和UserPhrases配置
  • 继承自TextArea的功能（表单、浮动标签、事件、方法、样式）
  • 最佳实践与完整示例

3. Custom AI Service Integration

3. 自定义AI服务集成

Detailed procedures for implementing custom AI backends beyond the default providers.
→ Full Custom AI Integration Guide
Key Topics:
  • IChatInferenceService
    interface overview
  • Mock AI service examples
  • Integration with Claude, DeepSeek, Groq, Gemini
  • Service registration patterns
  • Testing and troubleshooting custom services
实现默认提供商之外的自定义AI后端的详细步骤。
→ 完整自定义AI集成指南
核心主题：
  • IChatInferenceService
    接口概述
  • 模拟AI服务示例
  • 与Claude、DeepSeek、Groq、Gemini的集成
  • 服务注册模式
  • 自定义服务的测试与排查

Quick Start Checklist

快速入门检查清单

□ Ensure Blazor Web App is created with Server Interactivity mode
□ Install required NuGet packages (SmartComponents, Themes)
□ Register Syncfusion Blazor service in Program.cs
□ Register and configure AI service (OpenAI/Azure/Ollama/Custom)
□ Add stylesheet and script references to App.razor
□ Add SfSmartTextArea component with UserRole
□ Test with Ctrl+F5 (Windows) or ⌘+F5 (macOS)
□ 确保Blazor Web App采用Server交互模式创建
□ 安装所需的NuGet包（SmartComponents、Themes）
□ 在Program.cs中注册Syncfusion Blazor服务
□ 注册并配置AI服务（OpenAI/Azure/Ollama/自定义）
□ 在App.razor中添加样式表和脚本引用
□ 添加带有UserRole的SfSmartTextArea组件
□ 使用Ctrl+F5（Windows）或⌘+F5（macOS）进行测试

Key Concepts

核心概念

ConceptReference
UserRoleDefines context for AI autocompletion suggestions
UserPhrasesOptional predefined expressions aligned with tone/usage patterns
ShowSuggestionOnPopupControls display mode: 
true
(popup) or 
false
(inline, default)
IChatInferenceServiceInterface for implementing custom AI backends
ChatParametersStandardized input for AI response generation
概念说明
UserRole为AI自动补全建议定义上下文
UserPhrases可选的预定义表达式，与语气/使用模式保持一致
ShowSuggestionOnPopup控制显示模式：
true
（弹窗）或
false
（内联，默认）
IChatInferenceService用于实现自定义AI后端的接口
ChatParametersAI响应生成的标准化输入

Common Tasks

常见任务

Task: Set up OpenAI integration

任务：设置OpenAI集成

See: Getting Started Guide → OpenAI Configuration
参考：快速入门指南 → OpenAI配置

Task: Change suggestion display to popup mode

任务：将建议显示切换为弹窗模式

See: Customization Guide → Popup-Based Suggestions
参考：自定义指南 → 弹窗式建议

Task: Implement a custom Claude AI service

任务：实现自定义Claude AI服务

See: Custom AI Integration → Claude Integration
参考：自定义AI集成 → Claude集成

Task: Debug "No Suggestions Displayed" issue

任务：排查“无建议显示”问题

See: Custom AI Integration → Troubleshooting
参考：自定义AI集成 → 问题排查

NuGet Packages

NuGet包

Core Packages:
  • Syncfusion.Blazor.SmartComponents
    (v33.1.44+)
  • Syncfusion.Blazor.Themes
    (v33.1.44+)
AI Service Packages (based on provider):
  • OpenAI: 
    Microsoft.Extensions.AI
    , 
    Microsoft.Extensions.AI.OpenAI
  • Azure OpenAI: 
    Microsoft.Extensions.AI
    , 
    Microsoft.Extensions.AI.OpenAI
    , 
    Azure.AI.OpenAI
  • Ollama: 
    Microsoft.Extensions.AI
    , 
    OllamaSharp
核心包：
  • Syncfusion.Blazor.SmartComponents
    （v33.1.44+）
  • Syncfusion.Blazor.Themes
    （v33.1.44+）
AI服务包（根据提供商选择）：
  • OpenAI: 
    Microsoft.Extensions.AI
    , 
    Microsoft.Extensions.AI.OpenAI
  • Azure OpenAI: 
    Microsoft.Extensions.AI
    , 
    Microsoft.Extensions.AI.OpenAI
    , 
    Azure.AI.OpenAI
  • Ollama: 
    Microsoft.Extensions.AI
    , 
    OllamaSharp