syncfusion-wpf-smart-text-editor

Syncfusion WPF Smart Text Editor の実装

このスキルを使用する場面

ユーザーが次のことを必要としている場合に、このスキルを使用してください。

• AI を活用したテキスト入力を実装する：予測候補や文脈に応じた補完機能を使用します
• インテリジェントなオートコンプリートを追加する：WPF アプリケーションの複数行テキストエディターに追加します
• AI サービスを統合する：テキスト生成に Azure OpenAI、OpenAI、Ollama、またはカスタムプロバイダーを使用します
• スマートテキストフィールドを作成する：カスタマーサポート、メール作成、コンテンツ作成向けに作成します
• 応答性の高いテキストエディターを構築する：インラインまたはポップアップの候補表示モードを使用します
• 候補の動作をカスタマイズする：ユーザーロール、カスタムフレーズ、スタイル設定を使用します
• テキスト変更イベントを処理する：テキストエディター向けのコマンドパターンを実装します
• オフライン候補をサポートする：AI を利用できない場合に、カスタムフレーズライブラリを使用します

Smart Text Editor（SfSmartTextEditor）は、インテリジェントな入力支援、ブランドに合わせた応答テンプレート、AI で強化されたユーザー入力が必要なシナリオに最適です。

コンポーネントの概要

Syncfusion WPF Smart Text Editor は、予測候補を使用して入力を高速化する複数行入力コントロールです。文脈に応じた補完機能を実現する AI 推論サービスと統合でき、インラインまたはポップアップの候補表示モードを提供します。主な機能は次のとおりです。

主な機能：

• IChatInferenceService を介した AI による候補表示
• インラインおよびポップアップの候補表示モード
• オフライン候補用のカスタムフレーズライブラリ
• キーボード操作（Tab、右矢印キーで確定）
• ジェスチャーのサポート（タップ／クリックでポップアップ候補を表示）
• 最大文字数の検証
• スタイルをカスタマイズできるプレースホルダーテキスト
• UI の完全なカスタマイズ（フォント、色、サイズ）
• コマンドのサポート（TextChangedCommand）

サポート対象の AI プロバイダー：

• Azure OpenAI
• OpenAI
• Ollama（セルフホストモデル）
• IChatInferenceService インターフェイスを介したカスタムサービス
• Claude AI（Anthropic）
• DeepSeek AI
• Google Gemini AI
• Groq AI

ドキュメントとナビゲーションガイド

はじめにとインストール

📄 参照： references/getting-started.md

• Syncfusion.SfSmartComponents.WPF NuGet パッケージのインストール
• デザイナー、XAML、または C# を使用したコントロールの追加
• 候補表示用の UserRole と UserPhrases の設定
• App.xaml.cs での AI サービスの登録
• アプリケーションの実行と AI 機能の確認

参照するタイミング： Smart Text Editor の新規実装を開始するとき、開発環境を設定するとき、または既存の WPF プロジェクトにコントロールを追加するとき。

候補表示モード

📄 参照： references/suggestion-display-modes.md

• インラインモード：キャレットの後に候補をその場で表示します
• ポップアップモード：キャレットの近くにコンパクトなヒントを重ねて表示します
• キーボードショートカット（Tab、右矢印キー）
• ジェスチャーのサポート（タップ／クリック）
• インラインモードとポップアップモードの選択

参照するタイミング： 候補の表示方法を設定したい場合、表示モードを切り替えたい場合、またはデスクトップとタッチデバイスのどちらかに最適化したい場合。

カスタマイズとスタイル設定

📄 参照： references/customization.md

• テキストスタイルのカスタマイズ（FontSize、Foreground、フォント）
• プレースホルダーテキストと色のカスタマイズ
• 候補テキストの色（SuggestionInlineStyle）
• 候補ポップアップの背景（SuggestionPopupStyle）
• 入力の最大文字数（MaxLength プロパティ）
• スタイル設定の完全な例

参照するタイミング： アプリケーションのテーマに合わせて外観をカスタマイズするとき、テキストスタイルを変更するとき、プレースホルダーを設定するとき、または文字数制限を指定するとき。

コマンド

📄 参照： references/commands.md

• TextChangedCommand の概要と実装
• XAML でのコマンドバインディング
• コマンド処理の ViewModel パターン
• イベント処理パターン
• テキスト変更の追跡に関するユースケース

参照するタイミング： テキスト変更通知、MVVM コマンドパターン、またはカスタムイベント処理ロジックを実装するとき。

AI サービスの設定（組み込みプロバイダー）

📄 参照： references/ai-service-configuration.md

• App.xaml.cs でチャットクライアントを登録する
• Azure OpenAI の設定（デプロイメント、API キー、エンドポイント）
• OpenAI の設定（API キー、モデルの選択）
• Ollama のセルフホストモデル（インストール、ローカル設定）
• 各プロバイダーに必要な NuGet パッケージ
• 組み込み AI プロバイダーのトラブルシューティング

読むタイミング： AI による提案機能のために Azure OpenAI、OpenAI、または Ollama を設定する場合。公式または組み込みの AI プロバイダーを設定する際に参照してください。

一般的なパターン

パターン 1：サポートチケットの返信エディター

シナリオ： ブランドに合わせた返信を作成するカスタマーサポートアプリケーション。

<syncfusion:SfSmartTextEditor
    Placeholder="Write your response..."
    UserRole="Technical support engineer helping customers with product issues"
    MaxLength="2000"
    SuggestionDisplayMode="Inline">
    <syncfusion:SfSmartTextEditor.UserPhrases>
        <sys:String>Thanks for contacting Syncfusion support.</sys:String>
        <sys:String>Could you please share a reproducible sample?</sys:String>
        <sys:String>We've logged this as a bug and will update you soon.</sys:String>
        <sys:String>Let us know if you need further assistance.</sys:String>
    </syncfusion:SfSmartTextEditor.UserPhrases>
</syncfusion:SfSmartTextEditor>

パターン 2：カスタムスタイルを使ったメール作成

シナリオ： カスタムテーマとポップアップ提案機能を備えたメールクライアント。

<syncfusion:SfSmartTextEditor
    Placeholder="Compose your email..."
    UserRole="Professional email author"
    SuggestionDisplayMode="Popup"
    MaxLength="5000">
    <syncfusion:SfSmartTextEditor.Style>
        <Style TargetType="{x:Type syncfusion:SfSmartTextEditor}">
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Foreground" Value="#333333"/>
            <Setter Property="FontFamily" Value="Segoe UI"/>
        </Style>
    </syncfusion:SfSmartTextEditor.Style>
    <syncfusion:SfSmartTextEditor.SuggestionPopupStyle>
        <Style TargetType="syncfusion:SuggestionPopup">
            <Setter Property="Background" Value="#0078D4"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
    </syncfusion:SfSmartTextEditor.SuggestionPopupStyle>
</syncfusion:SfSmartTextEditor>

パターン 3：変更追跡機能付きテキストエディター

シナリオ： 自動保存や検証のためにテキストの変更を追跡します。

<syncfusion:SfSmartTextEditor
    x:Name="smartTextEditor"
    TextChangedCommand="{Binding TextChangedCommand}"
    Placeholder="Start typing..."/>

public class EditorViewModel : INotifyPropertyChanged
{
    public ICommand TextChangedCommand { get; }

    public EditorViewModel()
    {
        TextChangedCommand = new RelayCommand(OnTextChanged);
    }

    private void OnTextChanged()
    {
        // Auto-save, validation, or tracking logic
        Debug.WriteLine("Text changed - triggering auto-save");
    }
}

パターン 4：カスタムフレーズを使ったオフライン優先の設計

シナリオ： AI に接続できなくても動作するアプリ。

<syncfusion:SfSmartTextEditor
    Placeholder="Type your message..."
    UserRole="Sales representative responding to leads">
    <syncfusion:SfSmartTextEditor.UserPhrases>
        <sys:String>Thank you for your interest in our products.</sys:String>
        <sys:String>I'd be happy to schedule a demo.</sys:String>
        <sys:String>Our pricing starts at $99 per month.</sys:String>
        <sys:String>Let me connect you with our solutions team.</sys:String>
        <sys:String>Feel free to reach out with any questions.</sys:String>
    </syncfusion:SfSmartTextEditor.UserPhrases>
</syncfusion:SfSmartTextEditor>

注： AI サービスが設定されていない場合、エディターは提案に UserPhrases を自動的に使用します。

主なプロパティ

プロパティ	型	説明	デフォルト
Text	string	テキストの内容を取得または設定します	""
Placeholder	string	エディターが空のときに表示するプレースホルダーテキスト	null
UserRole	string	入力者と意図を説明します（AI の提案に反映されます）	null
UserPhrases	List<string>	オフラインでの提案に使用するカスタムフレーズライブラリ	null
SuggestionDisplayMode	SuggestionDisplayMode	表示モード：Inline または Popup	Inline
MaxLength	int	最大文字数	0（無制限）
TextChangedCommand	ICommand	テキストが変更されたときに実行されるコマンド	null
Style	Style	テキストのスタイル（FontSize、Foreground など）	Default
PlaceholderStyle	Style	プレースホルダーのスタイル	Default
SuggestionInlineStyle	Style	インライン提案テキストのスタイル	Default
SuggestionPopupStyle	Style	ポップアップ提案の背景スタイル	Default

一般的な使用例

ユーザーがインライン提案を必要とする場合（デスクトップ）

• 操作： SuggestionDisplayMode="Inline" を設定します
• 理由： キーボード中心のデバイスで自然な入力フローを実現します
• 参照： suggestion-display-modes.md

ユーザーがポップアップ提案を必要とする場合（タッチデバイス）

• 操作： SuggestionDisplayMode="Popup" を設定します
• 理由： モバイルやタッチスクリーンでタップまたはクリックしやすくなります
• 参照： suggestion-display-modes.md

ユーザーが Azure OpenAI との統合を必要とする場合

• 操作： App.xaml.cs で AzureOpenAIClient を設定します
• 理由： Azure のセキュリティとコンプライアンスを備えたエンタープライズ向け AI を利用できます
• 参照： ai-service-configuration.md

ユーザーが文字数制限を必要とする場合

• 操作： MaxLength プロパティを設定します
• 理由： 入力を検証し、過剰なテキストを防ぎます
• 参照： customization.md

ユーザーがテキスト変更の通知を必要とする場合

• 操作： TextChangedCommand を ViewModel にバインドします
• 理由： 自動保存、検証、分析のために変更を追跡できます
• 参照： commands.md

ユーザーがオフラインでの提案を必要とする場合

• 操作： AI サービスを使わずに UserPhrases を設定します
• 理由： AI が利用できない、または無効になっているときに提案を提供します
• 参照： getting-started.md

ユーザーがカスタムテーマを必要とする場合

• アクション： Style、PlaceholderStyle、SuggestionInlineStyle を適用します
• 理由： アプリケーションのブランディングとデザインシステムに合わせます
• 参考： customization.md

---

次のステップ：

1. 初期設定とインストールについて → getting-started.md をお読みください
2. AI プロバイダーの設定について → ai-service-configuration.md をお読みください
3. 外観のカスタマイズについて → customization.md をお読みください