syncfusion-winforms-ai-assistview

AI AssistView の実装

Syncfusion Windows Forms AI AssistView（SfAIAssistView）は、提案、入力インジケーター、カスタムビュー、OpenAI／ChatGPT とのシームレスな連携に対応した、AI 搭載チャットアプリケーションを構築するための高度な会話型インターフェイスコントロールです。

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

次のようなニーズがある場合に、このスキルを使用します。

• Windows Forms アプリケーションで AI 搭載チャットインターフェイスを構築する
• OpenAI、ChatGPT、または Azure OpenAI サービスをデスクトップアプリに統合する
• メッセージバブルとチャット履歴を備えた会話型 UI を作成する
• ユーザーがすばやく応答できるよう、AI による応答の提案を表示する
• AI 応答の非同期生成中に入力インジケーターを表示する
• カスタム BotView と UserView でチャットメッセージの表示をカスタマイズする
• ユーザープロンプトを検証し、カスタムアクションを処理する
• バナーをカスタマイズしてインテリジェントなアシスタントを構築する
• データバインディングを使用してリアルタイムのチャット体験を実装する

コンポーネントの概要

主な機能：

• 提案：選択可能な応答候補を表示し、会話をスムーズに進めます
• 入力インジケーター：AI の処理中に読み込みアニメーションを表示します
• バナーのカスタマイズ：ウェルカムメッセージと AI サービス情報を含むヘッダーをカスタマイズできます
• カスタムビュー：メッセージを表示するカスタム BotView と UserView を作成できます
• テーマのサポート：ライトテーマとダークテーマに自動的に適応します
• OpenAI との連携：Semantic Kernel を介して OpenAI サービスにシームレスに接続できます
• イベント：入力検証とカスタムアクションに対応する PromptRequest イベント
• データバインディング：ObservableCollection と INotifyPropertyChanged を完全にサポートします

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

はじめに

📄 参照: references/getting-started.md

• アセンブリの配置と NuGet パッケージ
• SfAIAssistView を使用した Windows Forms プロジェクトの作成
• デザイナーとコードによるコントロールの追加
• メッセージコレクションを含む ViewModel の作成
• メッセージのバインディングと Author の設定
• 基本的なチャットの実装

提案

📄 参照: references/suggestions.md

• AI による提案の表示
• ViewModel への提案のバインディング
• クイック応答のシナリオ
• 動的な提案の更新

入力インジケーター

📄 参照: references/typing-indicator.md

• ShowTypingIndicator プロパティ
• 非同期通信のフィードバック
• インジケーターの外観のカスタマイズ
• Author と DisplayText の設定

カスタマイズ

📄 参照: references/customization.md

• SetBannerView による BannerView のカスタマイズ
• SetBotView によるカスタム BotView の作成
• SetUserView によるカスタム UserView の作成
• Bot の応答にインタラクティブなボタンを追加
• カスタムのスタイルとレイアウト

イベント

📄 参照: references/events.md

• PromptRequest イベントの処理
• 入力検証
• カスタムアクションのトリガー
• Handled プロパティの使用

OpenAI との連携

📄 参照: references/openai-integration.md

• OpenAI／ChatGPT への接続
• Microsoft Semantic Kernel のセットアップ
• API 認証情報の設定
• NonStreamingChat の実装
• 非同期応答の処理
• 完全な動作例

クイックスタートの例

基本的なチャットインターフェイス

using Syncfusion.WinForms.AIAssistView;
using System.ComponentModel;
using System.Collections.ObjectModel;

namespace AIAssistViewDemo
{
    public partial class Form1 : Form
    {
        ViewModel viewModel;
        
        public Form1()
        {
            InitializeComponent();
            viewModel = new ViewModel();
            
            // Create AI AssistView
            SfAIAssistView sfAIAssistView1 = new SfAIAssistView();
            sfAIAssistView1.Dock = DockStyle.Fill;
            this.Controls.Add(sfAIAssistView1);
            
            // Bind messages
            sfAIAssistView1.DataBindings.Add("Messages", viewModel, "Chats", 
                true, DataSourceUpdateMode.OnPropertyChanged);
        }
    }
    
    // ViewModel
    public class ViewModel : INotifyPropertyChanged
    {
        private ObservableCollection<object> chats;
        private Author currentUser;
        
        public ViewModel()
        {
            this.Chats = new ObservableCollection<object>();
            this.CurrentUser = new Author { Name = "John" };
            this.GenerateMessages();
        }
        
        private async void GenerateMessages()
        {
            // User message
            this.Chats.Add(new TextMessage 
            { 
                Author = CurrentUser, 
                Text = "What is Windows Forms?" 
            });
            
            await Task.Delay(1000);
            
            // Bot response
            this.Chats.Add(new TextMessage 
            { 
                Author = new Author { Name = "Bot" }, 
                Text = "Windows Forms is a GUI framework for building Windows desktop applications." 
            });
        }
        
        public ObservableCollection<object> Chats
        {
            get => this.chats;
            set
            {
                this.chats = value;
                RaisePropertyChanged("Chats");
            }
        }
        
        public Author CurrentUser
        {
            get => this.currentUser;
            set
            {
                this.currentUser = value;
                RaisePropertyChanged("CurrentUser");
            }
        }
        
        public event PropertyChangedEventHandler PropertyChanged;
        
        public void RaisePropertyChanged(string propName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
        }
    }
}

よく使われるパターン

パターン 1：提案付きチャット

// In ViewModel
private IEnumerable<string> suggestion;

public IEnumerable<string> Suggestion
{
    get => this.suggestion;
    set
    {
        this.suggestion = value;
        RaisePropertyChanged("Suggestion");
    }
}

// Set suggestions after bot response
Suggestion = new ObservableCollection<string> 
{ 
    "Tell me more", 
    "What are alternatives?" 
};

// In Form
sfAIAssistView1.DataBindings.Add("Suggestions", viewModel, "Suggestion", 
    true, DataSourceUpdateMode.OnPropertyChanged);

パターン 2：AI の処理中に入力インジケーターを表示

// In ViewModel
private bool showTypingIndicator;

public bool ShowTypingIndicator
{
    get => this.showTypingIndicator;
    set
    {
        this.showTypingIndicator = value;
        RaisePropertyChanged("ShowTypingIndicator");
    }
}

// Usage
ShowTypingIndicator = true;
var response = await GetAIResponse(userMessage);
Chats.Add(new TextMessage { Author = botAuthor, Text = response });
ShowTypingIndicator = false;

// In Form
sfAIAssistView1.DataBindings.Add("ShowTypingIndicator", viewModel, 
    "ShowTypingIndicator", true, DataSourceUpdateMode.OnPropertyChanged);
    
sfAIAssistView1.TypingIndicator.Author = new Author 
{ 
    Name = "Bot", 
    AvatarImage = Image.FromFile(@"Assets\bot.png") 
};
sfAIAssistView1.TypingIndicator.DisplayText = "Typing";

パターン 3：カスタムバナー

BannerStyle customStyle = new BannerStyle
{
    TitleFont = new Font("Segoe UI", 14F, FontStyle.Bold),
    SubTitleFont = new Font("Segoe UI", 12F, FontStyle.Italic),
    ImageSize = AvatarSize.Medium,
    SubTitleColor = Color.Gray,
    TitleColor = Color.DarkBlue
};

string title = "AI Assistant";
string subTitle = "Powered by OpenAI";
sfAIAssistView1.SetBannerView(title, subTitle, 
    Image.FromFile(@"Assets\ai-icon.png"), customStyle);

パターン 4：プロンプトの検証

sfAIAssistView1.PromptRequest += (sender, e) =>
{
    var message = e.Message as TextMessage;
    if (message == null) return;
    
    // Validate input
    if (string.IsNullOrWhiteSpace(message.Text))
    {
        e.Handled = true; // Prevent adding to messages
        MessageBox.Show("Please enter a message.");
        return;
    }
    
    // Custom processing
    LogUserInput(message.Text);
};

主なプロパティとメソッド

プロパティ／メソッド	型	説明
Messages	ObservableCollection	チャットメッセージのコレクション
Suggestions	IEnumerable	応答候補項目
ShowTypingIndicator	bool	タイピングインジケーターの表示／非表示を切り替えます
TypingIndicator	TypingIndicator	タイピングインジケーターの設定
User	Author	現在のユーザー情報
SetBannerView()	Method	バナーの外観をカスタマイズします
SetBotView()	Method	ボットメッセージ用のカスタムビューを設定します
SetUserView()	Method	ユーザーメッセージ用のカスタムビューを設定します
PromptRequest	Event	ユーザーがプロンプトを送信したときに発生します

一般的なユースケース

ユースケース 1：カスタマーサポートチャットボット

よくある質問の候補チップや、応答の生成中に表示するタイピングインジケーターを備えた、AI を活用したカスタマーサポートインターフェースを構築します。

ユースケース 2：バーチャルアシスタント

ブランドに合わせたカスタムバナー、パーソナライズされたボットの応答、自然な会話のための OpenAI 統合を備えた、インテリジェントなデスクトップアシスタントを作成します。

ユースケース 3：インタラクティブなドキュメント

ユーザーがソフトウェアの機能について質問し、AI が生成した説明を受け取れる、会話形式のドキュメントブラウザーを実装します。

ユースケース 4：トレーニングシミュレーター

AI が段階的な会話形式の手順でユーザーをガイドする、インタラクティブなトレーニングアプリケーションを構築します。

インストール

Install-Package Syncfusion.SfAIAssistView.WinForms

OpenAI を統合する場合：

Install-Package Microsoft.SemanticKernel

トラブルシューティング

メッセージが表示されない場合：

• データバインディングが正しく設定されていることを確認します
• ObservableCollection が使用されていることを確認します（List ではありません）
• コレクションの更新時に RaisePropertyChanged が呼び出されていることを確認します

タイピングインジケーターが表示されない場合：

• 非同期処理の前に ShowTypingIndicator = true を設定します
• TypingIndicator.Author プロパティを設定します
• ShowTypingIndicator のバインディングが設定されていることを確認します

候補が表示されない場合：

• Suggestions プロパティを ViewModel にバインドします
• IEnumerable 型を使用します
• ボットの応答後に候補を更新します

OpenAI の接続に問題がある場合：

• API キーが有効で、期限切れでないことを確認します
• API エンドポイントの URL が正しいことを確認します
• Microsoft.SemanticKernel NuGet がインストールされていることを確認します
• ネットワークに接続できることを確認します