syncfusion-winui-ai-assistview

WinUI AI AssistView の実装

このスキルを使用するタイミング

以下が必要な場合に、このスキルを使用してください。

• AI チャットインターフェースまたは会話型 UI を作成する
• AI アシスタントまたはチャットボットを実装する
• AI サービス（OpenAI、Azure AI など）と統合する
• AI が生成した応答をフォーマットして表示する
• AI の処理中に入力中インジケーターを表示する
• すばやく返信するための AI による提案を表示する
• チャット操作（コピー、再生成、いいね／よくないね）用のカスタムツールバーを追加する
• ユーザーが時間のかかる AI の応答を停止できるようにする
• カスタマーサポートボットまたはヘルプシステムを構築する
• インテリジェントな会話型アプリケーションを作成する

ユーザーが以下のいずれかに言及した場合は、必ずこのスキルを適用してください。 WinUI アプリケーションにおける AI チャット、AI アシスタント、チャットボット、会話型 UI、AI の応答、チャットインターフェース、AI 統合、入力中インジケーター、AI による提案、AI を活用した会話。

コンポーネントの概要

SfAIAssistView は、AI サービスを利用するインテリジェントで応答性の高いアプリケーションを構築するための、包括的な AI チャットインターフェースを提供する Syncfusion WinUI コントロールです。提案、入力中インジケーター、応答ツールバー、カスタマイズ可能な外観を標準でサポートし、使いやすい会話型 UI を実現します。

名前空間： Syncfusion.UI.Xaml.Chat
NuGet パッケージ： Syncfusion.Chat.WinUI
プラットフォーム： WinUI 3 Desktop（.NET 5 以降、Windows App SDK 1.0 以降）

主な利点： ツールバー、提案、入力中インジケーター、応答停止機能を備えた完全な AI チャット体験をすぐに利用できます。チャット UI を一から構築する必要はありません。

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

はじめに

📄 参照： references/getting-started.md

• インストールと NuGet パッケージのセットアップ（Syncfusion.Chat.WinUI）
• 名前空間のインポート（Syncfusion.UI.Xaml.Chat）
• SfAIAssistView の基本的な初期化
• CurrentUser プロパティと Messages プロパティ
• TextMessage クラスと Author クラスを使用した ViewModel の作成
• AI チャットの最初の完全な例
• ライセンス登録

AI による提案

📄 参照： references/suggestions.md

• AI による提案のための Suggestions プロパティ
• すばやく返信できる選択肢の表示
• 右下隅への配置
• 動的な提案の更新
• 提案の選択処理
• 会話の進行を早めるユースケース

応答ツールバー

📄 参照： references/response-toolbar.md

• 組み込みのツールバー項目（コピー、再生成、いいね、よくないね）
• ResponseToolbarItem クラスとプロパティ
• ItemTemplate を使用したカスタムツールバー項目
• IsResponseToolbarVisible プロパティ
• ResponseToolbarItemClicked イベント
• ツールバーの外観のカスタマイズ
• 応答へのカスタム操作の追加

入力ツールバー

📄 参照： references/input-toolbar.md

• カスタム入力操作用の InputToolbarItem クラス
• テキスト入力領域へのツールバー項目の追加
• InputToolbarPosition（Left、Right）
• IsInputToolbarVisible プロパティ
• InputToolbarItemClicked イベント
• ファイルアップロード用の InputToolbarHeaderTemplate
• カスタム入力領域の操作

入力中インジケーターと応答の停止

📄 参照： references/typing-and-stop-responding.md

• AI の処理状況を示す TypingIndicator プロパティ
• ShowTypingIndicator ブール値プロパティ
• AI の応答生成中にリアルタイムのフィードバックを表示
• EnableStopResponding プロパティ
• StopResponding イベントとコマンド
• StopRespondingTemplate のカスタマイズ
• 進行中の AI 応答のキャンセル

テーマとイベント

📄 参照： references/theming-and-events.md

• RequestedTheme プロパティ（Dark、Light テーマ）
• App.xaml でのテーマのサポート
• PromptRequest イベント
• InputMessage プロパティと Handled プロパティ
• 処理前のユーザー入力の検証
• プロンプト送信時のカスタム操作
• テーマのカスタマイズ

クイックスタートの例

<Page
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Chat">
    <Grid>
        <syncfusion:SfAIAssistView 
            x:Name="aiAssistView"
            CurrentUser="{Binding CurrentUser}"
            Messages="{Binding Chats}"
            Suggestions="{Binding Suggestions}"
            ShowTypingIndicator="{Binding IsProcessing}"
            TypingIndicator="{Binding TypingIndicator}"/>
    </Grid>
</Page>

using Syncfusion.UI.Xaml.Chat;
using System.Collections.ObjectModel;

public class ViewModel : INotifyPropertyChanged
{
    private ObservableCollection<object> chats;
    private Author currentUser;
    private IEnumerable<string> suggestions;
    private TypingIndicator typingIndicator;
    private bool isProcessing;

    public ViewModel()
    {
        this.CurrentUser = new Author { Name = "User" };
        this.Chats = new ObservableCollection<object>();
        this.TypingIndicator = new TypingIndicator { Author = new Author { Name = "AI" } };
        this.Suggestions = new ObservableCollection<string>();
        InitializeChat();
    }

    private async void InitializeChat()
    {
        // User asks a question
        this.Chats.Add(new TextMessage 
        { 
            Author = CurrentUser, 
            Text = "What is WinUI?" 
        });
        
        // Show typing indicator
        IsProcessing = true;
        await Task.Delay(1000);
        
        // AI responds
        IsProcessing = false;
        this.Chats.Add(new TextMessage 
        { 
            Author = new Author { Name = "AI" }, 
            Text = "WinUI is a user interface layer that contains modern controls and styles for building Windows apps." 
        });
        
        // Update suggestions
        Suggestions = new ObservableCollection<string> 
        { 
            "What is the future of WinUI?", 
            "What is XAML?", 
            "What is the difference between WinUI 2 and WinUI 3?" 
        };
    }

    public ObservableCollection<object> Chats
    {
        get => chats;
        set { chats = value; RaisePropertyChanged(nameof(Chats)); }
    }

    public Author CurrentUser
    {
        get => currentUser;
        set { currentUser = value; RaisePropertyChanged(nameof(CurrentUser)); }
    }

    public IEnumerable<string> Suggestions
    {
        get => suggestions;
        set { suggestions = value; RaisePropertyChanged(nameof(Suggestions)); }
    }

    public TypingIndicator TypingIndicator
    {
        get => typingIndicator;
        set { typingIndicator = value; RaisePropertyChanged(nameof(TypingIndicator)); }
    }

    public bool IsProcessing
    {
        get => isProcessing;
        set { isProcessing = value; RaisePropertyChanged(nameof(IsProcessing)); }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void RaisePropertyChanged(string propertyName) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

よくあるパターン

1. メッセージを使った基本的な AI チャット

<syncfusion:SfAIAssistView 
    CurrentUser="{Binding CurrentUser}"
    Messages="{Binding Chats}"/>

public class ViewModel
{
    public Author CurrentUser { get; set; } = new Author { Name = "John" };
    public ObservableCollection<object> Chats { get; set; } = new();

    public ViewModel()
    {
        Chats.Add(new TextMessage { Author = CurrentUser, Text = "Hello!" });
        Chats.Add(new TextMessage { Author = new Author { Name = "Bot" }, Text = "Hi! How can I help you?" });
    }
}

使用する場面： 提案や入力中インジケーターを使わないシンプルな AI チャット。

2. 入力インジケーター付き AI チャット

<syncfusion:SfAIAssistView 
    CurrentUser="{Binding CurrentUser}"
    Messages="{Binding Chats}"
    ShowTypingIndicator="{Binding IsAIProcessing}"
    TypingIndicator="{Binding TypingIndicator}"/>

private async void SendMessageToAI(string userMessage)
{
    Chats.Add(new TextMessage { Author = CurrentUser, Text = userMessage });
    
    // Show typing indicator
    IsAIProcessing = true;
    
    // Call AI service
    var aiResponse = await CallAIService(userMessage);
    
    // Hide typing indicator and show response
    IsAIProcessing = false;
    Chats.Add(new TextMessage { Author = new Author { Name = "AI" }, Text = aiResponse });
}

使用する場面： AI が応答を生成している間、リアルタイムのフィードバックを表示します。

3. クイック返信向け AI 提案

<syncfusion:SfAIAssistView 
    CurrentUser="{Binding CurrentUser}"
    Messages="{Binding Chats}"
    Suggestions="{Binding CurrentSuggestions}"/>

private void UpdateSuggestions(string lastAIResponse)
{
    // Generate contextual suggestions based on AI response
    CurrentSuggestions = new ObservableCollection<string>
    {
        "Tell me more",
        "Show me an example",
        "What are the alternatives?"
    };
}

使用する場面： 文脈に沿ったクイック返信で、会話の流れをスムーズにします。

4. アクション付きカスタム応答ツールバー

<syncfusion:SfAIAssistView 
    CurrentUser="{Binding CurrentUser}"
    Messages="{Binding Chats}"
    IsResponseToolbarVisible="True"
    ResponseToolbarItemClicked="ResponseToolbar_ItemClicked"/>

private void ResponseToolbar_ItemClicked(object sender, ResponseToolbarItemClickedEventArgs e)
{
    switch (e.Item.ItemType)
    {
        case ResponseToolbarItemType.Copy:
            CopyToClipboard(e.Message.Text);
            break;
        case ResponseToolbarItemType.Regenerate:
            RegenerateAIResponse(e.Message);
            break;
        case ResponseToolbarItemType.Like:
            SendFeedback("like", e.Message);
            break;
        case ResponseToolbarItemType.Dislike:
            SendFeedback("dislike", e.Message);
            break;
    }
}

使用する場面： ユーザーが AI の応答に対して操作（コピー、再生成、評価）できるようにします。

5. ファイルアップロード付きカスタム入力ツールバー

<syncfusion:SfAIAssistView IsInputToolbarVisible="True">
    <syncfusion:SfAIAssistView.InputToolbarItems>
        <syncfusion:InputToolbarItem Tooltip="Attach file">
            <syncfusion:InputToolbarItem.ItemTemplate>
                <DataTemplate><Button Click="AttachFile_Click"><SymbolIcon Symbol="Attach"/></Button></DataTemplate>
            </syncfusion:InputToolbarItem.ItemTemplate>
        </syncfusion:InputToolbarItem>
    </syncfusion:SfAIAssistView.InputToolbarItems>
</syncfusion:SfAIAssistView>

使用する場面： ユーザーが AI プロンプトにファイルを添付できるようにします。実装の詳細については、input-toolbar.md を参照してください。

6. 長い AI 応答を停止する機能

<syncfusion:SfAIAssistView 
    CurrentUser="{Binding CurrentUser}"
    Messages="{Binding Chats}"
    EnableStopResponding="True"
    StopResponding="StopResponding_Event"/>

private CancellationTokenSource aiCancellationToken;

private async void SendToAI(string prompt)
{
    aiCancellationToken = new CancellationTokenSource();
    
    try
    {
        var response = await CallAIServiceAsync(prompt, aiCancellationToken.Token);
        Chats.Add(new TextMessage { Author = new Author { Name = "AI" }, Text = response });
    }
    catch (OperationCanceledException)
    {
        Chats.Add(new TextMessage { Author = new Author { Name = "AI" }, Text = "Response canceled." });
    }
}

private void StopResponding_Event(object sender, EventArgs e)
{
    aiCancellationToken?.Cancel();
}

使用する場面： ユーザーが長時間実行中の AI 応答をキャンセルできるようにします。

7. 入力検証向け PromptRequest イベント

private void PromptRequest_Event(object sender, PromptRequestEventArgs e)
{
    if (string.IsNullOrWhiteSpace(e.InputMessage.Text))
    {
        e.Handled = true;
        ShowError("Please enter a message.");
    }
}

使用する場面： AI による処理の前に、ユーザー入力を検証または前処理します。

8. OpenAI との統合パターン

private async Task<string> CallOpenAI(string prompt)
{
    var client = new OpenAIClient(apiKey);
    var response = await client.CompleteChatAsync("gpt-4", new ChatCompletionOptions
    {
        Messages = { new SystemChatMessage("You are a helpful assistant."), new UserChatMessage(prompt) }
    });
    return response.Value.Content[0].Text;
}

使用する場面： OpenAI GPT モデルと統合します。テーマの設定については、theming-and-events.md を参照してください。

主要なプロパティ

プロパティ	型	デフォルト	説明
Messages	ObservableCollection<object>	null	チャットメッセージ（TextMessage オブジェクト）のコレクションです。
CurrentUser	Author	null	現在のユーザーの作成者情報です。ユーザーメッセージと AI の応答を区別するために必要です。
Suggestions	IEnumerable<string>	null	クイック返信用に右下隅に表示される、AI による提案です。
ShowTypingIndicator	bool	false	AI の処理中に入力インジケーターを表示または非表示にします。
TypingIndicator	TypingIndicator	null	入力インジケーターの設定（作成者、テキスト）です。
IsResponseToolbarVisible	bool	true	応答ツールバー（コピー、再生成、いいね、よくないね）を表示または非表示にします。
ResponseToolbarItems	ObservableCollection<ResponseToolbarItem>	Built-in items	応答アクション用のカスタムツールバー項目です。
IsInputToolbarVisible	bool	false	テキスト入力領域に入力ツールバーを表示または非表示にします。
InputToolbarItems	ObservableCollection<InputToolbarItem>	null	入力領域用のカスタムツールバー項目（ファイルの添付など）です。
InputToolbarPosition	ToolbarPosition	Right	入力ツールバーの位置（Left または Right）です。
InputToolbarHeaderTemplate	DataTemplate	null	入力領域のヘッダー用カスタムテンプレート（ファイルアップロード情報など）です。
EnableStopResponding	bool	false	実行中の AI 応答をキャンセルする「応答を停止」ボタンを有効にします。
StopRespondingTemplate	DataTemplate	null	「応答を停止」ボタン用のカスタムテンプレートです。
StopRespondingCommand	ICommand	null	「応答を停止」ボタンがクリックされたときに実行されるコマンドです。
RequestedTheme	ElementTheme	Default	コントロールのテーマ（Light、Dark、または Default）です。App.xaml で設定します。

主要なイベント

イベント	説明
PromptRequest	ユーザーがプロンプトを送信したときに発生します。InputMessage プロパティと Handled プロパティを提供します。
ResponseToolbarItemClicked	応答ツールバーの項目がクリックされたときに発生します。項目の詳細を提供します。
InputToolbarItemClicked	入力ツールバーの項目がクリックされたときに発生します。項目の詳細を提供します。
StopResponding	「応答を停止」ボタンがクリックされたときに発生します。AI の処理をキャンセルするために使用します。

一般的なユースケース

AI チャットボットとアシスタント

• カスタマーサポート用チャットボット
• バーチャルアシスタント
• ヘルプデスクの自動化
• FAQ ボット
• 製品推薦アシスタント

推奨される方法： Messages で会話履歴を管理し、一般的な問い合わせには Suggestions を使用し、フィードバックには入力インジケーターを使用します。

AI を活用した開発ツール

• コード生成アシスタント
• ドキュメント生成ツール
• コードレビュー用ボット
• デバッグアシスタント

推奨される方法： コードのコピーや応答の再生成には、応答ツールバーを有効にします。ファイルやコードのアップロードには、入力ツールバーを使用します。

教育用 AI チューター

• インタラクティブな学習アシスタント
• 宿題サポートボット
• 語学学習チューター
• 教科別チューター

最適な方法： 学習パスの提案にはサジェスチョンを、回答の評価には回答ツールバーを、エンゲージメントの維持には入力中インジケーターを使用します。

コンテンツ生成

• 文章作成アシスタント
• メールの下書き作成
• ソーシャルメディアコンテンツの作成
• マーケティングコピーの生成

最適な方法： 回答ツールバーでコピー／再生成を有効にし、コンテンツのバリエーションにはサジェスチョンを使用します。

データ分析とインサイト

• ビジネスインテリジェンスアシスタント
• データクエリインターフェース
• レポート生成ボット
• 分析支援ツール

最適な方法： データのアップロードには入力ツールバーを使用し、長いクエリには応答の停止を使用し、エクスポート操作には回答ツールバーを使用します。

実装のヒント

1. メッセージ管理： メッセージの追加／削除時に UI を自動更新するには、Messages に ObservableCollection を使用します。

2. 入力中インジケーター： AI の非同期呼び出し中に表示し、回答が届いたら非表示にします。ViewModel のブール型プロパティにバインドします。

3. サジェスチョン： 会話のコンテキストに応じて動的に更新します。ユーザーが選択した後、または数回やり取りした後にクリアします。

4. エラー処理： PromptRequest イベントを使用して入力を検証します。AI サービスのエラーを適切に捕捉します。

5. パフォーマンス： 長い会話では、メッセージのページネーションを実装するか、表示するメッセージ数を制限することを検討します。

6. AI サービスの統合： AI サービスの呼び出しには async/await を使用します。応答停止機能にはキャンセルトークンを実装します。

7. 回答ツールバー： 既定の項目（Copy、Regenerate、Like、Dislike）は自動的に機能します。カスタムロジックには ResponseToolbarItemClicked を処理します。

8. 入力ツールバー： ファイルのアップロード、音声入力、絵文字ピッカーなど、頻繁に必要となる操作に使用します。

9. テーマのサポート： アプリ全体のテーマを設定するには、App.xaml で RequestedTheme を設定します。コントロールはライトモード／ダークモードに自動的に適応します。

10. アクセシビリティ： スクリーンリーダー向けに Author.Name を設定します。カスタムテンプレートでは十分なコントラストを確保してください。

関連ドキュメント

• はじめに： セットアップと基本的な使い方については、references/getting-started.md を参照してください
• サジェスチョン： AI によるクイック応答については、references/suggestions.md を参照してください
• 回答ツールバー： 回答に対する操作については、references/response-toolbar.md を参照してください
• 入力ツールバー： 入力エリアのカスタマイズについては、references/input-toolbar.md を参照してください
• 入力中表示と応答停止： インジケーターとキャンセルについては、references/typing-and-stop-responding.md を参照してください
• テーマとイベント： テーマとイベントについては、references/theming-and-events.md を参照してください