syncfusion-wpf-ai-assistview

SfAIAssistView の実装（WPF）

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

次のような場合にこのスキルを使用します。

• WPF で AI チャットまたはアシスタントの UI を構築する
• ユーザーと AI の応答を含むメッセージスレッドを表示する
• OpenAI または SemanticKernel をチャットインターフェイスに統合する
• AI が応答を処理している間、入力中インジケーターを表示する
• AI の応答後に提案チップを追加する
• 入力ツールバーや応答ツールバーをカスタマイズする
• PromptRequest イベントや「応答を停止」機能を処理する
• ViewTemplateSelector を使用して AI の応答で Markdown をレンダリングする
• 会話履歴を使って複数の会話を保存、切り替える
• ユーザーが入力を始める前に、入力ボックスにプレースホルダー／ヒントを表示する
• メッセージがないときに空の状態（ウェルカムメッセージ、行動喚起）をレンダリングする

NuGet パッケージ： Syncfusion.SfChat.Wpf 名前空間： Syncfusion.UI.Xaml.Chat 主要クラス： SfAIAssistView、TextMessage、AIMessage、Author、TypingIndicator、AssistConversationItem

---

クイックスタート

<Window xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Chat;assembly=Syncfusion.SfChat.WPF">
    <Grid>
        <Grid.DataContext>
            <local:ViewModel/>
        </Grid.DataContext>
        <syncfusion:SfAIAssistView
            Messages="{Binding Chats}"
            CurrentUser="{Binding CurrentUser}"
            Suggestions="{Binding Suggestions}"
            ShowTypingIndicator="{Binding ShowTypingIndicator}"
            TypingIndicator="{Binding TypingIndicator}" />
    </Grid>
</Window>

// ViewModel.cs
public class ViewModel : INotifyPropertyChanged
{
    public ObservableCollection<object> Chats { get; set; }
    public Author CurrentUser { get; set; }

    public ViewModel()
    {
        Chats = new ObservableCollection<object>();
        CurrentUser = new Author { Name = "User" };
        Chats.Add(new TextMessage
        {
            Author = CurrentUser,
            Text = "Hello, how can you help me?"
        });
        Chats.Add(new TextMessage
        {
            Author = new Author { Name = "AI" },
            Text = "I can answer questions and help with tasks."
        });
    }
}

---

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

はじめに

📄 参照： references/getting-started.md

• NuGet のインストールとアセンブリ参照
• XAML の名前空間とコントロールの宣言
• ObservableCollection<object> を使った ViewModel の設定
• TextMessage + Author のバインディングパターン
• CurrentUser の設定
• テーマの統合

OpenAI の統合

📄 参照： references/openai-integration.md

• Microsoft.SemanticKernel の NuGet 設定
• IChatCompletionService + Kernel の設定
• 非同期応答のための AIAssistChatService パターン
• AI 呼び出しを実行するための CollectionChanged トリガー
• ContentTemplate（AI アイコン）を使った AIMessage
• MdXaml を使って Markdown をレンダリングする ViewTemplateSelector
• 非同期処理と ShowTypingIndicator の連携

提案と入力中インジケーター

📄 参照： references/suggestions-and-typing-indicator.md

• Suggestions プロパティ（IEnumerable<string>）のバインディング
• AI の応答後に提案チップを更新する
• ViewModel での TypingIndicator オブジェクトの設定
• ShowTypingIndicator プロパティ
• 非同期の AI 呼び出しでインジケーターを切り替える

入力ツールバー

📄 参照： references/input-toolbar.md

• IsInputToolbarVisible プロパティ
• InputToolbarPosition（左／右）
• InputToolbarItem（ItemTemplate、IsEnabled、Tooltip、Visible）
• InputToolbarItemClicked イベントの処理
• ファイルアップロード形式のヘッダーに使用する InputToolbarHeaderTemplate

応答ツールバー

📄 参照： references/response-toolbar.md

• IsResponseToolbarVisible プロパティ
• 組み込みのツールバー項目：コピー、再生成、いいね、よくないね
• Index、ItemType、ItemTemplate を持つ ResponseToolbarItem
• ResponseToolbarItemClicked イベントの処理
• カスタム項目テンプレートの例

イベントと応答の停止

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

• PromptRequest イベント + PromptRequestEventArgs
• InputMessage と Handled プロパティのパターン
• EnableStopResponding プロパティ
• StopResponding イベントと StopRespondingCommand（MVVM）
• StopRespondingTemplate のカスタマイズ

会話履歴

📄 参照： references/conversation-history.md

• 履歴ペインを表示／非表示にする ShowNavigationView プロパティ
• データソースとなる Conversations（ObservableCollection<AssistConversationItem>）
• Title、DateTime、メッセージを含む AssistItems を持つ AssistConversationItem
• ナビゲーションペインのヘッダーテキストに使用する NavigationHeader
• 組み込みの新しいチャット機能と会話選択の動作

カスタマイズ（空のビュー、プレースホルダー）

📄 読む： references/customization.md

• 空の状態にシンプルなテキストやオブジェクトを表示する EmptyView
• リッチな DataTemplate の空の状態を表示する EmptyViewTemplate
• 入力ボックスのヒントテキストを指定する InputPlaceholderText
• EmptyView と BannerTemplate の連携方法

---

主なプロパティ

プロパティ	型	目的
Messages	ObservableCollection<object>	チャットメッセージのコレクション
CurrentUser	Author	ローカルユーザーを識別します
Suggestions	IEnumerable<string>	AI の応答後に表示される候補チップ
ShowTypingIndicator	bool	入力中のアニメーションを表示／非表示にします
TypingIndicator	TypingIndicator	Author を含む入力中インジケーター
IsInputToolbarVisible	bool	カスタム入力ツールバーを表示します（既定値：false）
IsResponseToolbarVisible	bool	応答ツールバーを表示します（既定値：true）
EnableStopResponding	bool	「Stop Responding」ボタンを有効にします（既定値：false）
ViewTemplateSelector	DataTemplateSelector	メッセージの種類ごとにカスタム表示を指定します
ShowNavigationView	bool	会話履歴のナビゲーションペインを表示／非表示にします（既定値：false）
Conversations	ObservableCollection<AssistConversationItem>	履歴ペインに表示されるアーカイブ済みの会話
NavigationHeader	string	ナビゲーションペインのヘッダーテキスト（既定値：空）
EmptyView	object	空の状態に表示するシンプルなコンテンツ
EmptyViewTemplate	DataTemplate	空の状態に表示するリッチなテンプレート
InputPlaceholderText	string	入力ボックスのプレースホルダー／ヒントテキスト

---

よく使うパターン

ユーザーがメッセージを送信 → AI が応答

// Subscribe to CollectionChanged on Chats
Chats.CollectionChanged += async (s, e) =>
{
    if (e.Action == NotifyCollectionChangedAction.Add
        && e.NewItems[0] is TextMessage msg
        && msg.Author.Name == CurrentUser.Name)
    {
        ShowTypingIndicator = true;
        var reply = await aiService.GetResponseAsync(msg.Text);
        Chats.Add(new AIMessage { Author = aiAuthor, Text = reply });
        ShowTypingIndicator = false;
    }
};

AI の応答後に候補を追加

Suggestions = new List<string> { "Tell me more", "Give an example", "Summarize" };

PromptRequest イベントを処理

<syncfusion:SfAIAssistView PromptRequest="OnPromptRequest" />

private void OnPromptRequest(object sender, PromptRequestEventArgs e)
{
    // e.InputMessage contains the user's text
    e.Handled = true; // Prevent default processing
}

会話履歴を表示

<syncfusion:SfAIAssistView
    Messages="{Binding Chats}"
    CurrentUser="{Binding CurrentUser}"
    Conversations="{Binding Conversations}"
    ShowNavigationView="True"
    NavigationHeader="Sync AI Assist" />

Conversations = new ObservableCollection<AssistConversationItem>
{
    new AssistConversationItem
    {
        Title = "Scotland",
        DateTime = DateTime.Today,
        AssistItems = new ObservableCollection<object>
        {
            new TextMessage { Author = CurrentUser, Text = "Tell me about Scotland." },
            new TextMessage { Author = new Author { Name = "AI" }, Text = "Scotland is known for its castles and landscapes." }
        }
    }
};

プレースホルダーとウェルカムテンプレートを含む空の状態

<syncfusion:SfAIAssistView
    Messages="{Binding Chats}"
    CurrentUser="{Binding CurrentUser}"
    InputPlaceholderText="Type your message here...">
    <syncfusion:SfAIAssistView.EmptyViewTemplate>
        <DataTemplate>
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBlock Text="Hi, how can I help you?" FontSize="20" FontWeight="Bold" HorizontalAlignment="Center" />
                <TextBlock Text="Ask anything to get started." FontSize="16" HorizontalAlignment="Center" />
            </StackPanel>
        </DataTemplate>
    </syncfusion:SfAIAssistView.EmptyViewTemplate>
</syncfusion:SfAIAssistView>