The chat-app Micro-Frontend — ChatbotUI Plugin

URL Routing

URL	Description
`/chat`	Default agent (configured as `DefaultAgentId` in appsettings)
`/chat?agent=hr-assistant`	Opens with a specific agent by name
`/chat?agent=hr-assistant&session=sess-abc`	Opens a specific existing conversation
`/chat?area=finance`	Opens the chat within a specific agent area

App Layout

chat-app/
├── src/
│   ├── pages/
│   │   └── ChatPage.tsx          ← Full-page layout
│   ├── components/
│   │   ├── ChatWidget/           ← Embeddable widget (shared with inline mode)
│   │   ├── ConversationSidebar/  ← Conversation history list
│   │   ├── AgentSwitcher/        ← Dropdown to switch between agents
│   │   └── SettingsPanel/        ← User preferences, theme toggle
│   ├── stores/
│   │   ├── chatStore.ts          ← Zustand store for active conversation
│   │   └── conversationsStore.ts ← Zustand store for history list
│   └── api/
│       └── chatApi.ts            ← Typed API client for all chat endpoints

Deploying the chat-app

The ChatbotUIPlugin serves the chat-app bundle as static files from the Octopus server. No separate web server is required:

// In ChatbotUIPlugin.OnStartAsync — registers the static file middleware
public async Task OnStartAsync(IServiceProvider sp, CancellationToken ct)
{
    var app  = sp.GetRequiredService<IApplicationBuilder>();
    var env  = sp.GetRequiredService<IWebHostEnvironment>();
    var bundlePath = Path.Combine(env.ContentRootPath, "chat-app-dist");

    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(bundlePath),
        RequestPath  = "/chat-static"
    });
}

Multi-Agent Conversation Switching

The AgentSwitcher component fetches the list of agents visible to the current user and allows switching agents mid-conversation. Switching agents starts a new conversation session while preserving the old one in the sidebar:

// GET /api/agents/available — returns agents the user can access
{
  "agents": [
    { "id": "hr-assistant",   "displayName": "HR Assistant",   "area": "hr" },
    { "id": "it-helpdesk",    "displayName": "IT Help Desk",   "area": "it" },
    { "id": "finance-bot",    "displayName": "Finance Bot",    "area": "finance" }
  ]
}

Server-Side Configuration

{
  "ChatbotUIPlugin": {
    "DefaultAgentId":     "customer-support",
    "MaxHistoryDays":     30,
    "MaxConversations":   50,
    "AllowAnonymous":     false,
    "RequireAuth":        true,
    "CorsAllowedOrigins": [
      "https://app.company.com",
      "https://portal.company.com"
    ]
  }
}

← Chat Actions