【C#/WinForms実践入門編(11)】AIアシスタントアプリ ～WinForms+BlazorハイブリッドでAIチャットを作る！～【Azure OpenAI活用】

namespace WinFormsBlazorApp.Services
{
    internal interface IChatService
    {
        Task<string> SendMessageAsync(string userInput);
        void ClearHistory();
    }
}

using Azure.AI.OpenAI;
using Azure;
using OpenAI.Chat;

namespace WinFormsBlazorApp.Services
{
    internal class AzureOpenAIChatService : IChatService
    {
        private readonly ChatClient _chatClient;
        private readonly List<ChatMessage> _conversationHistory;

        public AzureOpenAIChatService(string endpoint, string apiKey, string deploymentName)
        {
            // Azure OpenAI クライアントの初期化
            var azureClient = new AzureOpenAIClient(
                new Uri(endpoint),
                new AzureKeyCredential(apiKey));

            // チャットクライアントの取得
            _chatClient = azureClient.GetChatClient(deploymentName);
            _conversationHistory = new List<ChatMessage>();
        }

        public async Task<string> SendMessageAsync(string userInput)
        {
            if (string.IsNullOrEmpty(userInput))
                throw new ArgumentNullException(nameof(userInput), "メッセージが空です。");

            // ユーザーメッセージを履歴に追加
            _conversationHistory.Add(new UserChatMessage(userInput));

            // チャット完了リクエスト
            ChatCompletion completion = await _chatClient.CompleteChatAsync(_conversationHistory);

            // アシスタントの応答を履歴に追加
            _conversationHistory.Add(new AssistantChatMessage(completion));

            // レスポンステキストを返す
            return completion.Content[0].Text;
        }

        public void ClearHistory()
        {
            _conversationHistory.Clear();
        }
    }
}

@using WinFormsBlazorApp.Services
@inject IChatService ChatService

<div class="container-fluid d-flex flex-column vh-100 p-3">
    <h3>シンプルAIチャット</h3>
    <div class="border rounded p-3 mb-3 flex-grow-1" style="overflow-y: auto;">
        @foreach (var message in chatHistory)
        {
            <div class="@(message.IsUser ? "text-end" : "text-start") mb-2">
                <span class="badge @(message.IsUser ? "bg-primary" : "bg-secondary") p-2 text-wrap"
                      style="max-width: 80%; display: inline-block; text-align: left;">
                    @if (message.IsUser)
                    {
                        @message.Text
                    }
                    else
                    {
                        @((MarkupString)message.Text.Replace("\n", "<br>"))
                    }
                </span>
            </div>
        }
    </div>
    <div class="input-group">
        <input type="text" class="form-control" placeholder="メッセージを入力..."
               @bind="currentMessage" @bind:event="oninput" @onkeypress="@(async e => { if (e.Key == "Enter") await SendMessageAsync(); })" />
        <button class="btn btn-primary" @onclick="SendMessageAsync">送信</button>
    </div>
</div>
@code {
    private List<ChatMessage> chatHistory = new List<ChatMessage>();
    private string currentMessage = string.Empty;
    private async Task SendMessageAsync()
    {
        if (string.IsNullOrWhiteSpace(currentMessage))
            return;

        string userMessage = currentMessage;
        currentMessage = string.Empty;

        // ユーザーメッセージをチャット履歴に追加
        chatHistory.Add(new ChatMessage { Text = userMessage, IsUser = true });

        // ChatServiceを使用して応答を取得
        var response = await ChatService.SendMessageAsync(userMessage);

        // ボットの応答をチャット履歴に追加
        chatHistory.Add(new ChatMessage { Text = response, IsUser = false });
    }

    // シンプルなチャットメッセージのモデルクラス
    private class ChatMessage
    {
        public string Text { get; set; } = string.Empty;
        public bool IsUser { get; set; }
    }
}

using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;
using WinFormsBlazorApp.Pages;
using WinFormsBlazorApp.Services;

namespace WinFormsBlazorApp.Forms
{
    public partial class MainForm : Form
    {
        public MainForm()
        {
            InitializeComponent();
            var services = new ServiceCollection();
            services.AddWindowsFormsBlazorWebView();
            services.AddScoped<IChatService, AzureOpenAIChatService>(
                serviceProvider =>
                {
                    var endpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
                    var apiKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_KEY");
                    var deploymentName = Environment.GetEnvironmentVariable("AZURE_OPENAI_DEPLOYMENT_NAME");
                    if (string.IsNullOrEmpty(endpoint) || string.IsNullOrEmpty(apiKey) || string.IsNullOrEmpty(deploymentName))
                    {
                        throw new InvalidOperationException("Azure OpenAI configuration is missing.");
                    }
                    return new AzureOpenAIChatService(endpoint, apiKey, deploymentName);
                });
            blazorWebView1.HostPage = "wwwroot\\index.html";
            blazorWebView1.Services = services.BuildServiceProvider();
            blazorWebView1.RootComponents.Add<Chat>("#app");
        }
    }
}