Blazor

builder.AddFabrCoreClient();
builder.Services.AddFabrCoreClientComponents();

<link rel="stylesheet"
      href="_content/FabrCore.Client/fabr.css" />

<CascadingValue Value="@DockManager">
    <ChatDock UserHandle="@_userId"
              AgentHandle="assistant"
              AgentType="MyAssistantAgent"
              Title="AI Assistant"
              Icon="bi bi-robot"
              WelcomeMessage="Hello! How can I help?" />
</CascadingValue>

<ChatDock UserHandle="@_userId"
          AgentHandle="assistant"
          AgentType="MyAssistantAgent"
          ChatDockSize="ChatDockSize.Large"
          Title="AI Assistant" />

<ChatDock UserHandle="@_userId"
          AgentHandle="assistant"
          AgentType="MyAssistantAgent"
          ChatDockSize="ChatDockSize.Large"
          Plugins="@(new List<string> { \"weather\", \"calendar\" })"
          Tools="@(new List<string> { \"calculate\" })"
          Title="AI Assistant"
          Position="ChatDockPosition.Right" />

<CascadingValue Value="@DockManager">
    <ChatDock UserHandle="@_userId"
              AgentHandle="support"
              AgentType="SupportAgent"
              Title="Support"
              Icon="bi bi-headset" />

    <ChatDock UserHandle="@_userId"
              AgentHandle="docs"
              AgentType="DocAgent"
              Title="Documentation"
              Icon="bi bi-book" />
</CascadingValue>

public class OrderDetailsAgentProxy
    : FabrCoreClientAgentProxy<OrderDetails>
{
    private AIAgent? _agent;
    private AgentThread? _thread;

    public override async Task OnInitializeAsync()
    {
        var modelConfig = await fabrHostApiClient
            .GetModelConfigAsync("default");
        var apiKey = await fabrHostApiClient
            .GetApiKeyAsync(modelConfig.ApiKeyAlias);

        IChatClient chatClient = new OpenAIChatClient(
            model: modelConfig.Model, apiKey: apiKey.Value);

        _agent = new ChatClientAgent(chatClient,
            new ChatClientAgentOptions
            {
                Name = Handle,
                ChatOptions = new ChatOptions
                {
                    Instructions = "You are an order assistant.",
                    Tools = [AIFunctionFactory.Create(UpdateStatus)]
                }
            })
            .AsBuilder()
            .UseOpenTelemetry(null, cfg => cfg.EnableSensitiveData = true)
            .Build(serviceProvider);

        _thread = _agent.GetNewThread();
    }

    [Description("Updates the order status.")]
    private async Task<string> UpdateStatus(
        [Description("The new status")] string status)
    {
        await InvokeAsync(() =>
        {
            Component.OrderStatus = status;
            RequestComponentUpdate();
        });
        return $"Status updated to '{status}'";
    }
}

<div class="order-details">
    <h3>Order: @OrderId</h3>
    <strong>Status:</strong> @OrderStatus
</div>

<OrderDetailsAgent
    Component="this"
    Handle="@($\"order-agent-{OrderId}\")" />

@page "/entity/{EntityId:guid}"

<ChatDock @key="@($\"chatdock-{EntityId}\")"
          UserHandle="@_userId"
          AgentHandle="@($\"editor-{EntityId}\")"
          AgentType="EditorAgent"
          Title="Editor Assistant"
          Position="ChatDockPosition.Right"
          AdditionalArgs="@GetAgentArgs()" />

@code {
    [Parameter] public Guid EntityId { get; set; }
    private string _userId = "user-123";

    private Dictionary<string, string> GetAgentArgs() => new()
    {
        ["entityId"] = EntityId.ToString(),
        ["userId"] = _userId
    };
}

:root {
    /* Primary colors */
    --chat-dock-primary: #3b82f6;
    --chat-dock-secondary: #1e3a5f;
    --chat-dock-text-on-dark: #ffffff;

    /* Background colors */
    --chat-dock-surface: #ffffff;
    --chat-dock-bg: #f3f4f6;

    /* Status colors */
    --chat-dock-success: #22c55e;
    --chat-dock-warning: #f59e0b;
    --chat-dock-danger: #ef4444;

    /* Text colors */
    --chat-dock-text: #1f2937;
    --chat-dock-text-muted: #6b7280;

    /* Borders */
    --chat-dock-border: #e5e7eb;
    --chat-dock-border-strong: #d1d5db;

    /* Border radii */
    --chat-dock-radius-sm: 4px;
    --chat-dock-radius-md: 8px;
    --chat-dock-radius-lg: 12px;

    /* Spacing */
    --chat-dock-spacing-1: 4px;
    --chat-dock-spacing-2: 8px;
    --chat-dock-spacing-3: 12px;
    --chat-dock-spacing-4: 16px;

    /* Effects */
    --chat-dock-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --chat-dock-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

await fabrAgentHost.SendMessage(new AgentMessage
{
    FromHandle = fabrAgentHost.GetHandle(),
    ToHandle = userHandle,
    MessageType = "thinking",
    Message = "Searching documents..."
});

@page "/documents"

<ChatDock UserHandle="@_userHandle"
          AgentHandle="document-agent"
          AgentType="DocumentAgent"
          OnMessageReceived="OnAgentResponse"
          OnMessageSent="OnUserMessage" />

<h3>Recent Activity</h3>
<ul>
    @foreach (var entry in _activityLog)
    {
        <li>@entry</li>
    }
</ul>

@code {
    private string _userHandle = "user-123";
    private List<string> _activityLog = new();

    private Task<bool> OnAgentResponse(AgentMessage message)
    {
        _activityLog.Insert(0,
            $"[{DateTime.Now:HH:mm:ss}] Agent: {message.Message}");

        // Access metadata from the agent
        if (message.State?.TryGetValue("action",
            out var action) == true)
        {
            _activityLog.Insert(0,
                $"  Action performed: {action}");
        }

        return Task.FromResult(true); // show in chat
    }

    private void OnUserMessage(string text)
    {
        _activityLog.Insert(0,
            $"[{DateTime.Now:HH:mm:ss}] You: {text}");
    }
}

<ChatDock UserHandle="@_userHandle"
          AgentHandle="dashboard-agent"
          AgentType="DashboardAgent"
          OnMessageReceived="HandleMessage" />

@code {
    private string _userHandle = "user-123";

    private Task<bool> HandleMessage(AgentMessage message)
    {
        if (message.MessageType == "status")
        {
            // Process for activity log, state updates, etc.
            ProcessStatusUpdate(message);
            return Task.FromResult(false); // suppress from chat
        }

        return Task.FromResult(true); // show in chat
    }
}

<ChatDock UserHandle="@_userHandle"
          AgentHandle="research-agent"
          AgentType="ResearchAgent"
          Title="Research"
          OnMessageReceived="msg => OnAgentResponse(\"research\", msg)" />

<ChatDock UserHandle="@_userHandle"
          AgentHandle="writer-agent"
          AgentType="WriterAgent"
          Title="Writer"
          OnMessageReceived="msg => OnAgentResponse(\"writer\", msg)" />

<p>Last active agent: @_lastActiveAgent</p>

@code {
    private string _userHandle = "user-123";
    private string _lastActiveAgent = "(none)";

    private Task<bool> OnAgentResponse(
        string agentName, AgentMessage message)
    {
        _lastActiveAgent = agentName;
        return Task.FromResult(true);
    }
}

@page "/dashboard"
@using FabrCore.Client
@using FabrCore.Core
@inject IClientContextFactory ClientContextFactory
@implements IAsyncDisposable

<ChatDock UserHandle="@_userHandle"
          AgentHandle="support-agent"
          AgentType="SupportAgent" />

<p>Total messages received: @_messageCount</p>

@code {
    private string _userHandle = "user-123";
    private IClientContext? _clientContext;
    private int _messageCount;

    protected override async Task OnInitializedAsync()
    {
        // Get the shared context for this user
        _clientContext = await ClientContextFactory
            .GetOrCreateAsync(_userHandle);

        // Subscribe to ALL agent messages for this user
        _clientContext.AgentMessageReceived += HandleAllMessages;
    }

    private void HandleAllMessages(
        object? sender, AgentMessage message)
    {
        InvokeAsync(() =>
        {
            _messageCount++;
            StateHasChanged();
        });
    }

    public async ValueTask DisposeAsync()
    {
        // Always unsubscribe to prevent memory leaks
        if (_clientContext != null)
        {
            _clientContext.AgentMessageReceived -= HandleAllMessages;
            // Do NOT dispose — the factory manages its lifecycle
        }
    }
}

@using FabrCore.Client.Services
@implements IDisposable

<CascadingValue Value="_dockManager">
    <ChatDock UserHandle="@_userHandle"
              AgentHandle="agent-a"
              AgentType="AgentA"
              Title="Agent A" />
    <ChatDock UserHandle="@_userHandle"
              AgentHandle="agent-b"
              AgentType="AgentB"
              Title="Agent B" />
</CascadingValue>

@if (_dockManager.ExpandedDockId != null)
{
    <div class="overlay-active">A chat panel is open</div>
}

@code {
    private string _userHandle = "user-123";
    private ChatDockManager _dockManager = new();

    protected override void OnInitialized()
    {
        _dockManager.StateChanged += OnDockStateChanged;
    }

    private void OnDockStateChanged()
    {
        InvokeAsync(StateHasChanged);
    }

    public void Dispose()
    {
        _dockManager.StateChanged -= OnDockStateChanged;
    }
}

┌─────────────────────────────────────────────────────┐
│                   Blazor Page                       │
│  ┌──────────────┐          ┌──────────────┐         │
│  │  ChatDock #1 │          │  ChatDock #2 │         │
│  │  "Support"   │          │  "Sales"     │         │
│  │  handle: a1  │          │  handle: a2  │         │
│  └──────┬───────┘          └──────┬───────┘         │
│         └───────────┬─────────────┘                 │
│              ChatDockManager                        │
│          (only one open at a time)                  │
├─────────────────────┼───────────────────────────────┤
│              ClientContext                          │
│  ┌──────────────────┴──────────────────┐            │
│  │         Orleans Silo                │            │
│  │  ┌────────────┐  ┌────────────┐    │            │
│  │  │  Agent a1  │  │  Agent a2  │    │            │
│  │  │  (Support) │  │  (Sales)   │    │            │
│  │  └────────────┘  └────────────┘    │            │
│  └─────────────────────────────────────┘            │
└─────────────────────────────────────────────────────┘

var builder = WebApplication.CreateBuilder(args);

// Server (Orleans silo + REST API)
builder.AddFabrCoreServer(new FabrCoreServerOptions
{
    AdditionalAssemblies = [typeof(AssistantAgent).Assembly]
});

// Client (connects to local silo)
builder.AddFabrCoreClient();
builder.Services.AddFabrCoreClientComponents();

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();
builder.Services.AddControllers()
    .AddApplicationPart(typeof(FabrCoreServerOptions).Assembly);

var app = builder.Build();

app.UseFabrCoreServer();
app.UseFabrCoreClient();
app.MapControllers();
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

[AgentAlias("AssistantAgent")]
public sealed class AssistantAgent : FabrCoreAgentProxy
{
    private IChatClient? _chatClient;
    private List<ChatMessage> _history = new();

    public override async Task OnInitialize()
    {
        _chatClient = await GetChatClient("OpenAIProd");
    }

    public override async Task<AgentMessage> OnMessage(
        AgentMessage message)
    {
        var response = message.Response();

        // Send thinking indicator
        await fabrAgentHost.SendMessage(new AgentMessage
        {
            FromHandle = fabrAgentHost.GetHandle(),
            ToHandle = message.FromHandle,
            MessageType = "thinking",
            Message = "Thinking..."
        });

        _history.Add(new ChatMessage(ChatRole.User,
            message.Message));

        var messages = new List<ChatMessage>
        {
            new(ChatRole.System,
                config.SystemPrompt ?? "You are helpful.")
        };
        messages.AddRange(_history);

        var result = await _chatClient!.GetResponseAsync(messages);
        _history.Add(new(ChatRole.Assistant, result.Text));

        response.Message = result.Text;
        return response;
    }
}

@page "/"
@rendermode InteractiveServer
@inject ChatDockManager DockManager

<CascadingValue Value="@DockManager">
    <div class="chat-dock-container">
        <ChatDock UserHandle="@UserId"
                  AgentHandle="support-agent"
                  AgentType="AssistantAgent"
                  Title="Support"
                  Icon="bi bi-headset"
                  SystemPrompt="@SupportPrompt"
                  Position="ChatDockPosition.BottomRight" />

        <ChatDock UserHandle="@UserId"
                  AgentHandle="sales-agent"
                  AgentType="AssistantAgent"
                  Title="Sales"
                  Icon="bi bi-currency-dollar"
                  SystemPrompt="@SalesPrompt"
                  Position="ChatDockPosition.BottomRight" />
    </div>
</CascadingValue>

@code {
    private const string UserId = "demo-user";
    private const string SupportPrompt = "You are a support assistant.";
    private const string SalesPrompt = "You are a sales assistant.";
}

┌──────────┐     ┌────────────┐     ┌──────────────────┐
│  User    │     │  Chat UI   │     │  HitlAgentProxy  │
│  (UI)    │     │  (Client)  │     │  (Orleans Grain)  │
└────┬─────┘     └──────┬─────┘     └────────┬─────────┘
     │                  │                     │
     │ "Cancel order"   │                     │
     │─────────────────>│ SendAndReceive      │
     │                  │────────────────────>│
     │                  │                     │ Runs AI Agent
     │                  │                     │ Detects approval
     │                  │                     │ Stores in state
     │                  │ approval_request    │
     │ Show approval UI │<────────────────────│
     │<─────────────────│                     │
     │                  │                     │
     │ Click "Approve"  │                     │
     │─────────────────>│ approval_response   │
     │                  │────────────────────>│
     │                  │                     │ Clears pending
     │                  │                     │ Executes tool
     │                  │ assistant response  │
     │ Show response    │<────────────────────│
     │<─────────────────│                     │

[AgentAlias("HitlAgent")]
public sealed class HitlAgentProxy : FabrCoreAgentProxy
{
    private const string PendingApprovalKey
        = "hitl.pending_approval";

    public override async Task OnInitialize()
    {
        // Safe tools — no approval needed
        var safeTools = new AIFunction[]
        {
            AIFunctionFactory.Create(
                _orderTools.GetOrderDetails)
        };

        // Wrap dangerous tools in ApprovalRequired
        var approvalTools = new AIFunction[]
        {
            new ApprovalRequiredAIFunction(
                AIFunctionFactory.Create(
                    _orderTools.CancelOrder)),
            new ApprovalRequiredAIFunction(
                AIFunctionFactory.Create(
                    _orderTools.ChangeOrderPriority))
        };

        (_agent, _thread) = await CreateChatClientAgent(
            "OpenAIProd",
            tools: safeTools.Concat(approvalTools)
                .Cast<AITool>().ToList());
    }
}

// When approval is needed — persist before responding
SetState(PendingApprovalKey, pending);
await FlushStateAsync();

// When approval arrives — clear before processing
RemoveState(PendingApprovalKey);
await FlushStateAsync();

@if (msg.IsApprovalRequest)
{
    <div class="card border-warning">
        <div class="card-header bg-warning">
            Approval Required
        </div>
        <div class="card-body">
            <p>Function: @msg.ApprovalData.FunctionName</p>
            <pre>@msg.ApprovalData.ArgumentsJson</pre>

            <button class="btn btn-success"
                    @onclick="() => HandleApproval(id, true)">
                Approve
            </button>
            <button class="btn btn-danger"
                    @onclick="() => HandleApproval(id, false)">
                Reject
            </button>
        </div>
    </div>
}