diff --git a/0-Agents/AgentsWebUI/Components/Layout/MainLayout.razor.css b/0-Agents/AgentsWebUI/Components/Layout/MainLayout.razor.css index 38d1f25..9a23588 100644 --- a/0-Agents/AgentsWebUI/Components/Layout/MainLayout.razor.css +++ b/0-Agents/AgentsWebUI/Components/Layout/MainLayout.razor.css @@ -9,21 +9,21 @@ main { } .sidebar { - background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); + background-image: linear-gradient(180deg, var(--color-sidebar-start, #052767) 0%, var(--color-sidebar-end, #3a0647) 70%); } .top-row { - background-color: #f7f7f7; - border-bottom: 1px solid #d6d5d5; + background-color: var(--color-surface-alt, #f7f7f7); + border-bottom: 1px solid var(--color-border, #d6d5d5); justify-content: flex-end; - height: 3.5rem; + height: var(--toprow-height, 3.5rem); display: flex; align-items: center; } .top-row ::deep a, .top-row ::deep .btn-link { white-space: nowrap; - margin-left: 1.5rem; + margin-left: var(--space-6, 1.5rem); text-decoration: none; } @@ -52,7 +52,7 @@ main { } .sidebar { - width: 250px; + width: var(--sidebar-width, 250px); height: 100vh; position: sticky; top: 0; diff --git a/0-Agents/AgentsWebUI/Components/Layout/NavMenu.razor b/0-Agents/AgentsWebUI/Components/Layout/NavMenu.razor index 750cb0b..6551ce4 100644 --- a/0-Agents/AgentsWebUI/Components/Layout/NavMenu.razor +++ b/0-Agents/AgentsWebUI/Components/Layout/NavMenu.razor @@ -20,7 +20,7 @@ @* πŸš€ Basics *@
-
πŸš€ BASICS
+
πŸš€ BASICS
Basic Threads Structured Output @@ -30,7 +30,7 @@ @* πŸ”§ Functions & Tools *@
-
πŸ”§ FUNCTIONS & TOOLS
+
πŸ”§ FUNCTIONS & TOOLS
Functions/Tools Function Approval Agent as Function @@ -41,7 +41,7 @@ @* πŸ’Ύ Storage & Persistence *@
-
πŸ’Ύ STORAGE & PERSISTENCE
+
πŸ’Ύ STORAGE & PERSISTENCE
Persisted Conversation Custom Thread Storage Chat Reduction @@ -51,7 +51,7 @@ @* 🌐 Multimodal & External *@
-
🌐 MULTIMODAL & EXTERNAL
+
🌐 MULTIMODAL & EXTERNAL
Using Image Using MCP Server Background Responses @@ -61,47 +61,35 @@ @* ⚑ Advanced Features *@
-
⚑ ADVANCED FEATURES
+
⚑ ADVANCED FEATURES
Middleware Declarative Agent Reasoning
-
- 🧠 PROMPTING STRATEGIES -
+ + @* 🧠 Prompting Strategies *@
+
🧠 PROMPTING STRATEGIES
πŸ”— Chain-of-Thought -
-
🌳 Tree of Thoughts -
-
πŸ•ΈοΈ Graph of Thoughts -
-
πŸ’» Program of Thoughts -
-
⚑ ReAct -
-
πŸͺž Reflection -
-
✨ Self-Refine diff --git a/0-Agents/AgentsWebUI/Components/Layout/NavMenu.razor.css b/0-Agents/AgentsWebUI/Components/Layout/NavMenu.razor.css index ceb845a..cda8a66 100644 --- a/0-Agents/AgentsWebUI/Components/Layout/NavMenu.razor.css +++ b/0-Agents/AgentsWebUI/Components/Layout/NavMenu.razor.css @@ -16,12 +16,13 @@ } .top-row { - min-height: 3.5rem; + min-height: var(--toprow-height, 3.5rem); background-color: rgba(0,0,0,0.4); } .navbar-brand { - font-size: 1.1rem; + font-size: var(--font-size-lg, 1.1rem); + font-weight: var(--font-weight-semibold, 600); } .bi { @@ -47,23 +48,23 @@ } .nav-item { - font-size: 0.9rem; - padding-bottom: 0.5rem; + font-size: var(--font-size-sm, 0.875rem); + padding-bottom: var(--space-2, 0.5rem); } .nav-item:first-of-type { - padding-top: 1rem; + padding-top: var(--space-4, 1rem); } .nav-item:last-of-type { - padding-bottom: 1rem; + padding-bottom: var(--space-4, 1rem); } .nav-item ::deep .nav-link { color: #d7d7d7; background: none; border: none; - border-radius: 4px; + border-radius: var(--radius-md, 4px); height: 3rem; display: flex; align-items: center; @@ -99,7 +100,7 @@ display: block; /* Allow sidebar to scroll for tall menus */ - height: calc(100vh - 3.5rem); + height: calc(100vh - var(--toprow-height, 3.5rem)); overflow-y: auto; } } @@ -107,12 +108,12 @@ /* ─── NavMenu Category Headers ─────────────────────────────────────────── */ .nav-category-header { - font-size: 0.7rem; - font-weight: 700; + font-size: var(--font-size-xs, 0.7rem); + font-weight: var(--font-weight-bold, 700); letter-spacing: 0.08em; text-transform: uppercase; - padding: 0.5rem 0 0.25rem 0; - /* colour is set inline per category */ + padding: var(--space-2, 0.5rem) 0 var(--space-1, 0.25rem) 0; + /* color is set inline per category using CSS variable: style="color: var(--color-cat-*)" */ pointer-events: none; user-select: none; } diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent01.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent01.razor index 5f9fc3d..067b648 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent01.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent01.razor @@ -1,36 +1,76 @@ ο»Ώ@page "/agent01" @inject IConfiguration Configuration -Agent 01 +Agent 01 – Basic Agent -

Agent 01 - Basic Agent

- -

Demonstrates basic AI agent setup allowing users to configure instructions and messages, with Submit and Stream buttons for synchronous and real-time responses using OpenAI GPT-4.1-nano via OpenRouter.

- -
- - -
-
- - -
-
- - +
+

πŸ€– Agent 01 – Basic Agent

+

Demonstrates basic AI agent setup allowing users to configure instructions and messages, with Submit and Stream buttons for synchronous and real-time responses using OpenAI GPT-4.1-nano via OpenRouter.

-@if (!string.IsNullOrEmpty(response)) -{ +
+ +
-
+
+
βš™οΈ Configuration
-
Response
-

@response

+
+ + +
+
+ + +
+
+ + +
-} + + +
+ @if (isLoading && string.IsNullOrEmpty(response)) + { +
+
πŸ’¬ Response
+
+

+ + + + Waiting for response... +

+
+
+ } + @if (!string.IsNullOrEmpty(response)) + { +
+
+ πŸ’¬ Response + @if (isLoading) + { + + + + } +
+
+
@response
+
+
+ } +
+ +
@code { private string message = "Tell me a long joke about a pirate. It should be at least two pargraphs."; @@ -44,8 +84,8 @@ protected override Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set in."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent02.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent02.razor index c1c2956..5f5804f 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent02.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent02.razor @@ -1,41 +1,118 @@ ο»Ώ@page "/agent02" @inject IConfiguration Configuration -Agent 02 -

Agent 02 - Agent with Thread (Multi-conversation)

+Agent 02 – Agent with Thread -

Showcases multi-turn conversations with threads, where the agent maintains context across sequential messages using GetNewThread() for continued interaction.

- -
- - -
-
- - -
-
- - -
-
- - +
+

🧡 Agent 02 – Agent with Thread

+

Showcases multi-turn conversations with threads, where the agent maintains context across sequential messages using GetNewThread() for continued interaction.

-@if (!string.IsNullOrEmpty(firstResponse)) -{ +
+ +
-
+
+
βš™οΈ Configuration
-
Response
-

@firstResponse

-
-

@secondResponse

+
+ + +
+
+ + +
+
+ + +
+
+ + +
-} + + +
+ @if (isLoading && string.IsNullOrEmpty(firstResponse)) + { +
+
🧡 Conversation Thread
+
+

+ + + + Waiting for response... +

+
+
+ } + @if (!string.IsNullOrEmpty(firstResponse)) + { +
+
+ 🧡 Conversation Thread + @if (isLoading) + { + + + + } +
+
+
+
+ You +
@firstMessage
+
+
+ Agent +
+
@firstResponse
+
+
+ @if (!string.IsNullOrEmpty(secondResponse)) + { +
+ You +
@secondMessage
+
+
+ Agent +
+
@secondResponse
+
+
+ } + @if (isLoading && !string.IsNullOrEmpty(firstResponse) && string.IsNullOrEmpty(secondResponse)) + { +
+ You +
@secondMessage
+
+
+
+ + + +
+
+ } +
+
+
+ } +
+ +
@code { private string instructions = "You are good at telling jokes."; @@ -53,8 +130,8 @@ protected override Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set in."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent03.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent03.razor index ca1ea41..0424cc6 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent03.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent03.razor @@ -1,43 +1,85 @@ ο»Ώ@page "/agent03" @inject IConfiguration Configuration -Agent 03 +Agent 03 – Agent with Function/Tool -

Agent 03 - Agent with Function/Tool

- -

Demonstrates function calling with AIFunctionFactory-created tools (Add and Multiply), logging function executions and enabling agents to perform calculations.

- -
- - -
-
- - -
-
- - +
+

πŸ”§ Agent 03 – Agent with Function/Tool

+

Demonstrates function calling with AIFunctionFactory-created tools (Add and Multiply), logging function executions and enabling agents to perform calculations.

-@if (!string.IsNullOrEmpty(response)) -{ +
+ +
-
+
+
βš™οΈ Configuration
-
Response
-

@response

+
+ + +
+
+ + +
+
+ + +
-
-
-
Log
-

@((MarkupString)log)

+
+ + +
+ @if (isLoading && string.IsNullOrEmpty(response)) + { +
+
πŸ’¬ Response
+
+

+ + + + Processing function calls... +

+
-
+ } + @if (!string.IsNullOrEmpty(response)) + { +
+
+ πŸ’¬ Response + @if (isLoading) + { + + + + } +
+
+
@response
+
+
+ } + @if (!string.IsNullOrEmpty(log)) + { +
+
πŸ“‹ Function Call Log
+
+
@((MarkupString)log)
+
+
+ }
-} +
@code { private string message = "I have purchased 2 apples for $5. I purchased 10 more apples $4 each. How much is the value of my apples?"; @@ -52,8 +94,8 @@ protected override Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set in."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent04.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent04.razor index 3200f55..4f2eeda 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent04.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent04.razor @@ -2,43 +2,88 @@ @inject IConfiguration Configuration @inject IJSRuntime JsRuntime -Agent 04 +Agent 04 – Functions with User Approval -

Agent 0 - Functions with User Approval

- -

Features user approval for function calls using ApprovalRequiredAIFunction, prompting confirmations via JavaScript dialog before executing math operations.

- -
- - -
-
- - -
-
- - +
+

βœ… Agent 04 – Functions with User Approval

+

Features user approval for function calls using ApprovalRequiredAIFunction, prompting confirmations via JavaScript dialog before executing math operations.

-@if (!string.IsNullOrEmpty(response)) -{ +
+ +
-
+
+
βš™οΈ Configuration
-
Response
-

@response

+
+ + +
+
+ + +
+
+ + +
-
-
-
Log
-

@((MarkupString)log)

-
+
+ ⚠️ This page requires browser approval dialogs. Make sure pop-ups are not blocked for this site.
-} + +
+ @if (isLoading && string.IsNullOrEmpty(response)) + { +
+
πŸ’¬ Response
+
+

+ + + + Waiting for approval and processing... +

+
+
+ } + @if (!string.IsNullOrEmpty(response)) + { +
+
+ πŸ’¬ Response + @if (isLoading) + { + + + + } +
+
+
@response
+
+
+ } + @if (!string.IsNullOrEmpty(log)) + { +
+
πŸ“‹ Approval Log
+
+
@((MarkupString)log)
+
+
+ } +
+ +
@code { @* Suppress MEAI001 for ApprovalRequiredAIFunction usage *@ @@ -57,8 +102,8 @@ protected override Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set in."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent05.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent05.razor index adf1855..d3dd4d4 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent05.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent05.razor @@ -2,36 +2,71 @@ @inject IConfiguration Configuration -Agent 05 +Agent 05 – Structured Output -

Agent 05 - Structured Output

- -

Illustrates structured output by enforcing JSON schema response format to extract person details (name, age, occupation) from natural language input.

- -
- - -
-
- - -
-
- - +
+

πŸ“‹ Agent 05 – Structured Output

+

Illustrates structured output by enforcing JSON schema response format to extract person details (name, age, occupation) from natural language input.

-@if (!string.IsNullOrEmpty(response)) -{ +
+ +
-
+
+
βš™οΈ Configuration
-
Response
-

@((MarkupString)response)

+
+ + +
+
+ + +
+
+ + +
+
+ πŸ“„ Returns structured PersonInfo JSON with name, age, and occupation fields. +
-} + + +
+ @if (isLoading && string.IsNullOrEmpty(response)) + { +
+
πŸ“Š Structured Result
+
+

+ + + + Extracting structured data... +

+
+
+ } + @if (!string.IsNullOrEmpty(response)) + { +
+
πŸ“Š Structured Result
+
+
@((MarkupString)response)
+
+
+ } +
+ +
@code { private string message = "Please provide information about John Smith, who is a 35-year-old software engineer."; @@ -45,8 +80,8 @@ protected override Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set in."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent06.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent06.razor index 7d89482..613de4a 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent06.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent06.razor @@ -1,50 +1,94 @@ ο»Ώ@page "/agent06" @inject IConfiguration Configuration -Agent 06 +Agent 06 – Persisted Conversation -

Agent 06 - Persisted Conversation

- -

Shows thread persistence through serialization and deserialization, saving conversation state to temporary files and resuming multi-turn dialogues.

- -
- - -
-
- - -
-
- - +
+

πŸ’Ύ Agent 06 – Persisted Conversation

+

Shows thread persistence through serialization and deserialization, saving conversation state to temporary files and resuming multi-turn dialogues.

-@if (!string.IsNullOrEmpty(response)) -{ -
-
+
+ + +
+
+
βš™οΈ Configuration
-
Response
-

@((MarkupString)@response)

+
+ + +
+
+ + +
+
+ + +
-
-
-
Log
-

@((MarkupString)log)

+
+ + +
+ @if (isLoading && string.IsNullOrEmpty(response)) + { +
+
πŸ’¬ Response
+
+

+ + + + Processing conversation... +

+
-
-
-
-
Thread
- 
 
-                    @threadLog
-
+ } + @if (!string.IsNullOrEmpty(response)) + { +
+
+ πŸ’¬ Response + @if (isLoading) + { + + + + } +
+
+
@((MarkupString)@response)
+
-
+ } + @if (!string.IsNullOrEmpty(log)) + { +
+
πŸ“‹ Persistence Log
+
+
@((MarkupString)log)
+
+
+ } + @if (!string.IsNullOrEmpty(threadLog)) + { +
+
🧡 Thread State (JSON)
+
+ 
@threadLog
+
+
+ }
-} + +
@code { private string message = "Tell me a short joke about a pirate."; @@ -60,8 +104,8 @@ protected override Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set in."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent07.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent07.razor index e606ca3..75f5184 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent07.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent07.razor @@ -2,50 +2,97 @@ @inject IConfiguration Configuration @using Microsoft.Extensions.VectorData -Agent 07 +Agent 07 – Custom Thread Storage -

Agent 07 - Custom Thread Storage

- -

Demonstrates custom thread storage with VectorChatMessageStore, persisting conversation history in an in-memory vector store for scalable context management.

- -
- - -
-
- - -
-
- - +
+

πŸ—„οΈ Agent 07 – Custom Thread Storage

+

Demonstrates custom thread storage with VectorChatMessageStore, persisting conversation history in an in-memory vector store for scalable context management.

-@if (!string.IsNullOrEmpty(response)) -{ -
-
+
+ + +
+
+
βš™οΈ Configuration
-
Response
-

@((MarkupString)@response)

+
+ + +
+
+ + +
+
+ + +
-
-
-
Log
-

@((MarkupString)log)

-
+
+ 🧠 Uses an in-memory vector store as a custom ChatHistoryProvider for session storage.
-
-
-
Thread
- 
 
-                    @threadLog
-
+
+ + +
+ @if (isLoading && string.IsNullOrEmpty(response)) + { +
+
πŸ’¬ Response
+
+

+ + + + Processing with vector storage... +

+
-
+ } + @if (!string.IsNullOrEmpty(response)) + { +
+
+ πŸ’¬ Response + @if (isLoading) + { + + + + } +
+
+
@((MarkupString)@response)
+
+
+ } + @if (!string.IsNullOrEmpty(log)) + { +
+
πŸ“‹ Vector Store Log
+
+
@((MarkupString)log)
+
+
+ } + @if (!string.IsNullOrEmpty(threadLog)) + { +
+
🧡 Thread State (JSON)
+
+ 
@threadLog
+
+
+ }
-} + +
@code { private string message = "Tell me a short joke about a pirate."; @@ -61,8 +108,8 @@ protected override Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set in."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent08.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent08.razor index 32fc4ce..076ed5f 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent08.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent08.razor @@ -1,36 +1,83 @@ ο»Ώ@page "/agent08" @inject IConfiguration Configuration +@inject IWebHostEnvironment WebHostEnvironment -Agent 08 +Agent 08 – Agent Using Image -

Agent 08 - Agent Using Image

- -

Uses multimodal capabilities with image analysis, sending text prompts and image URLs to the AI for descriptive responses using GPT-4o via OpenRouter.

- -
- - -
-
- - -
- -
- +
+

πŸ–ΌοΈ Agent 08 – Agent Using Image

+

Uses multimodal capabilities with image analysis, sending text prompts and image URLs to the AI for descriptive responses using GPT-4o via OpenRouter.

-@if (!string.IsNullOrEmpty(response)) -{ +
+ +
-
+
+
βš™οΈ Configuration
-
Response
-

@response

+
+ + +
+
+ + +
+
+ +
+ Nature boardwalk in Wisconsin Madison +
+
+
+ +
-} + + +
+ @if (isLoading && string.IsNullOrEmpty(response)) + { +
+
πŸ’¬ Analysis
+
+

+ + + + Analyzing image... +

+
+
+ } + @if (!string.IsNullOrEmpty(response)) + { +
+
+ πŸ’¬ Image Analysis + @if (isLoading) + { + + + + } +
+
+
@response
+
+
+ } +
+ +
@code { private string message = "What do you see in this image?"; @@ -44,8 +91,8 @@ protected override Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set in."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { @@ -63,11 +110,15 @@ { response = string.Empty; isLoading = true; + // Load image binary from local image file at wwwroot/image.jpg + + var imageData = await File.ReadAllBytesAsync(Path.Combine(WebHostEnvironment.WebRootPath, "image.jpg")); + var imageContent = new DataContent(imageData, "image/jpeg"); var chatMessage = new Microsoft.Extensions.AI.ChatMessage(ChatRole.User, [ new TextContent(message), - new UriContent("https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Gfp-wisconsin-madison-the-nature-boardwalk.jpg/2560px-Gfp-wisconsin-madison-the-nature-boardwalk.jpg", "image/jpeg") + imageContent ]); var thread = await agent.CreateSessionAsync(); diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent09.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent09.razor index b9ea936..a777c39 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent09.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent09.razor @@ -1,42 +1,88 @@ ο»Ώ@page "/agent09" @inject IConfiguration Configuration -Agent 09 +Agent 09 – Using Remote MCP Server -

Agent 09 - Using Remote MCP Server

- -

Integrates remote MCP server for Microsoft Learn documentation search, allowing agents to query and fetch official docs using HttpClientTransport.

- -
- - -
-
- - -
-
- - +
+

🌐 Agent 09 – Using Remote MCP Server

+

Integrates remote MCP server for Microsoft Learn documentation search, allowing agents to query and fetch official docs using HttpClientTransport.

-@if (!string.IsNullOrEmpty(response)) -{ +
+ +
-
+
+
βš™οΈ Configuration
-
Response
-

@((MarkupString)RenderMarkdown(response))

+
+ + +
+
+ + +
+
+ + +
-
-
-
Log
-

@((MarkupString)log)

-
+
+ πŸ”— Connects to the Microsoft Learn MCP at learn.microsoft.com/api/mcp via HttpClientTransport.
-} + + +
+ @if (isLoading && string.IsNullOrEmpty(response)) + { +
+
πŸ’¬ Response
+
+

+ + + + Querying documentation... +

+
+
+ } + @if (!string.IsNullOrEmpty(response)) + { +
+
+ πŸ’¬ Response + @if (isLoading) + { + + + + } +
+
+
@((MarkupString)RenderMarkdown(response))
+
+
+ } + @if (!string.IsNullOrEmpty(log)) + { +
+
πŸ“‹ MCP Connection Log
+
+
@((MarkupString)log)
+
+
+ } +
+ +
@code { #pragma warning disable MEAI001 // Suppress evaluation-only diagnostic for HostedMcpServerTool @@ -69,8 +115,8 @@ log = string.Empty; isLoading = true; - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set in."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { @@ -118,8 +164,8 @@ foreach (var t in mcpTools) log += $"Tool: {t.Title}- {t.Name}
{JsonSerializer.Serialize(t.AdditionalProperties)}
"; - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set in."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent10.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent10.razor index a5d9519..f31e1dd 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent10.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent10.razor @@ -1,43 +1,88 @@ ο»Ώ@page "/agent10" @inject IConfiguration Configuration -Agent 10 +Agent 10 – Agent as Function -

Agent 10 - Agent as Function

- -

Presents agent as a tool concept, where one agent functions as a callable tool for another, responding in French with weather information.

- -
- - -
-
- - -
-
- - +
+

πŸ”— Agent 10 – Agent as Function

+

Presents agent as a tool concept, where one agent functions as a callable tool for another, responding in French with weather information.

-@if (!string.IsNullOrEmpty(response)) -{ +
+ +
-
+
+
βš™οΈ Configuration
-
Response
-

@response

+
+ + +
+
+ + +
+
+ + +
-
-
-
Log
-

@((MarkupString)log)

-
+
+ πŸ”— A WeatherAgent is exposed as an AIFunction tool for the main agent to call.
-} + +
+ @if (isLoading && string.IsNullOrEmpty(response)) + { +
+
πŸ’¬ Response
+
+

+ + + + Delegating to weather agent... +

+
+
+ } + @if (!string.IsNullOrEmpty(response)) + { +
+
+ πŸ’¬ Response + @if (isLoading) + { + + + + } +
+
+
@response
+
+
+ } + @if (!string.IsNullOrEmpty(log)) + { +
+
πŸ“‹ Agent Delegation Log
+
+
@((MarkupString)log)
+
+
+ } +
+ +
@code { private string message = "What is the weather like in Amsterdam?"; @@ -52,8 +97,8 @@ protected override Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set in."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent11.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent11.razor index ffa3f3c..6b3000d 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent11.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent11.razor @@ -2,44 +2,88 @@ @inject IConfiguration Configuration -Agent 11 +Agent 11 – Chat Reduction -

Agent 11 - Chat Reduction

- -

Applies chat reduction techniques with MessageCountingChatReducer, limiting stored conversation history to maintain efficient context.

- -
- - -
-
- - +
+

⚑ Agent 11 – Chat Reduction

+

Applies chat reduction techniques with MessageCountingChatReducer, limiting stored conversation history to maintain efficient context.

-
- - -
+
-@if (!string.IsNullOrEmpty(response)) -{ +
-
+
+
βš™οΈ Configuration
-
Response
-

@((MarkupString)RenderMarkdown(@response))

+
+ + +
+
+ + +
+
+ + +
-
-
-
Log
-

@((MarkupString)log)

-
+
+ ⚑ Uses MessageCountingChatReducer(2) β€” only the last 2 messages are kept in context. Click Submit multiple times to see the reduction effect.
-} + +
+ @if (isLoading && string.IsNullOrEmpty(response)) + { +
+
πŸ’¬ Conversation
+
+

+ + + + Generating conversation... +

+
+
+ } + @if (!string.IsNullOrEmpty(response)) + { +
+
+ πŸ’¬ Conversation + @if (isLoading) + { + + + + } +
+
+
@((MarkupString)RenderMarkdown(@response))
+
+
+ } + @if (!string.IsNullOrEmpty(log)) + { +
+
πŸ“‹ Reduction Log
+
+
@((MarkupString)log)
+
+
+ } +
+ +
@code { #pragma warning disable MEAI001 @@ -81,8 +125,8 @@ protected override async Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set in."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent12.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent12.razor index 4720fe8..a6dfbe5 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent12.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent12.razor @@ -1,38 +1,79 @@ ο»Ώ@page "/agent12" @inject IConfiguration Configuration -Agent 12 +Agent 12 – Background Responses -

Agent 12 - Backgroud Responses

- -

Explores background responses with continuation tokens for handling long-running processes and resumable streaming (note: Azure-only feature).

- -

This example won't work: it only works with Azure and they don't support other yet.

- -
- - -
-
- - -
-
- - +
+

⏳ Agent 12 – Background Responses

+

Explores background responses with continuation tokens for handling long-running processes and resumable streaming (note: Azure-only feature).

-@if (!string.IsNullOrEmpty(response)) -{ +
+ +
-
+
+
βš™οΈ Configuration
-
Response
-

@((MarkupString)RenderMarkdown(@response))

+
+ + +
+
+ + +
+
+ + +
+
+ ⚠️ Azure-only feature. This example requires Azure OpenAI and will not work with other providers. Background responses use AllowBackgroundResponses = true and ContinuationToken for resumable streaming. +
-} + + +
+ @if (isLoading && string.IsNullOrEmpty(response)) + { +
+
πŸ’¬ Response
+
+

+ + + + Processing long-running background response... +

+
+
+ } + @if (!string.IsNullOrEmpty(response)) + { +
+
+ πŸ’¬ Background Response + @if (isLoading) + { + + + + } +
+
+
@((MarkupString)RenderMarkdown(@response))
+
+
+ } +
+ +
@code { @@ -51,8 +92,8 @@ protected override async Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set in."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent13.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent13.razor index c764223..18b71a9 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent13.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent13.razor @@ -1,37 +1,79 @@ ο»Ώ@page "/agent13" @inject IConfiguration Configuration -Agent 13 +Agent 13 – Plugins -

Agent 13 - Plugins

- -

Showcases plugins with dependency injection, exposing weather and time providers as AI tools in a service collection architecture.

- -
- - -
-
- - -
-
- - +
+

πŸ”§ Agent 13 – Plugins

+

Showcases plugins with dependency injection, exposing weather and time providers as AI tools in a service collection architecture.

-@if (!string.IsNullOrEmpty(response)) -{ +
+ +
-
+
+ πŸ’‘ Plugins via DI: This agent registers WeatherProvider and CurrentTimeProvider in a ServiceCollection, then exposes them as AI tools through an AgentPlugin class. +
+
+
βš™οΈ Configuration
-
Response
-

@response

+
+ + +
+
+ + +
+
+ + +
-} + +
+ @if (isLoading && string.IsNullOrEmpty(response)) + { +
+
πŸ“€ Response
+
+

+ + + + Waiting for response... +

+
+
+ } + @if (!string.IsNullOrEmpty(response)) + { +
+
+ πŸ“€ Response + @if (isLoading) + { + + + + } +
+
+
@response
+
+
+ } +
+ +
@code { #pragma warning disable MEAI001 @@ -59,8 +101,8 @@ var serviceProvider = services.BuildServiceProvider(); - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set in."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent14.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent14.razor index 91db896..2c5953c 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent14.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent14.razor @@ -1,43 +1,93 @@ ο»Ώ@page "/agent14" @inject IConfiguration Configuration -Agent 14 +Agent 14 – Middleware -

Agent 14 - Middleware

- -

Implements middleware for function call logging, PII filtering, guardrails, and overriding results to enhance agent behavior and safety.

- -
- - -
-
- - -
-
- - +
+

⚠️ Agent 14 – Middleware

+

Implements middleware for function call logging, PII filtering, guardrails, and overriding results to enhance agent behavior and safety.

-@if (!string.IsNullOrEmpty(response)) -{ +
+ +
-
+
+
βš™οΈ Configuration
-
Response
-

@((MarkupString)@response)

+
+ + +
+
+ + +
+
+ + +
-
+
+
πŸ”— Middleware Pipeline
-
Log
-

@((MarkupString)log)

+
    +
  • 1 FunctionCallMiddleware β€” logs Pre/Post invoke for all functions
    • +
  • 2 FunctionCallOverrideWeather β€” overrides the weather result
    • +
  • 3 PIIMiddleware β€” redacts phone numbers, emails & names
    • +
  • 4 GuardrailMiddleware β€” filters harmful/illegal/violent content
    • +
-} + +
+ @if (isLoading && string.IsNullOrEmpty(response)) + { +
+
πŸ“€ Response
+
+

+ + + + Processing middleware pipeline... +

+
+
+ } + @if (!string.IsNullOrEmpty(response)) + { +
+
+ πŸ“€ Response + @if (isLoading) + { + + + + } +
+
+
@((MarkupString)response)
+
+
+
+
πŸ“‹ Middleware Log
+
+
@((MarkupString)log)
+
+
+ } +
+ +
@code { #pragma warning disable MEAI001 @@ -53,8 +103,8 @@ protected override Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set in."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent15.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent15.razor index bb03dce..2913eab 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent15.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent15.razor @@ -1,32 +1,94 @@ ο»Ώ@page "/agent15" @inject IConfiguration Configuration -Agent 15 +Agent 15 – Declarative Agent -

Agent 15 - Declartive Agent

- -

Uses declarative agent configuration via YAML, defining output schema for structured responses with specified temperature and model options.

- -
- - -
-
- - +
+

⚠️ Agent 15 – Declarative Agent

+

Uses declarative agent configuration via YAML, defining output schema for structured responses with specified temperature and model options.

-@if (!string.IsNullOrEmpty(response)) -{ +
+ +
-
+
+
βš™οΈ YAML Agent Definition
-
Response
-

@response

+
+ + 
kind: Prompt
+name: Assistant
+description: Helpful assistant
+instructions: You are a helpful assistant.
+  You answer questions in the language
+  specified by the user. You return your
+  answers in a JSON format.
+model:
+  options:
+    temperature: 0.9
+    topP: 0.95
+outputSchema:
+  properties:
+    language:
+      type: string
+      required: true
+    answer:
+      type: string
+      required: true
+
+
+ + +
+
+ + +
-} + + +
+ @if (isLoading && string.IsNullOrEmpty(response)) + { +
+
πŸ“€ Structured Response
+
+

+ + + + Waiting for structured response... +

+
+
+ } + @if (!string.IsNullOrEmpty(response)) + { +
+
+ πŸ“€ Structured Response (JSON) + @if (isLoading) + { + + + + } +
+
+ 
@response
+
+
+ } +
+ +
@code { private string message = "Tell me a long joke about a pirate. It should be at least two pargraphs."; @@ -62,8 +124,8 @@ protected override Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set in."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent16.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent16.razor index 971c872..cba19a8 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent16.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent16.razor @@ -1,38 +1,85 @@ ο»Ώ@page "/agent16" @inject IConfiguration Configuration -Agent 16 +Agent 16 – Reasoning -

Agent 16 - Reasoning

- -

Demonstrates advanced reasoning capabilities using OpenAI's o4-mini model through OpenRouter, allowing users to see both the final response and the step-by-step reasoning process.

- -
- - -
-
- - +
+

⚠️ Agent 16 – Reasoning

+

Demonstrates advanced reasoning capabilities using OpenAI's o4-mini model through OpenRouter, allowing users to see both the final response and the step-by-step reasoning process.

-@if (!string.IsNullOrEmpty(response)) -{ +
+ +
-
+
+
βš™οΈ Configuration
-
Response
-

@response

+
+ + +
+
+ Model: openai/o4-mini   + Effort: Medium +
+
+ + +
-
-
-
Reasoning
-

@((MarkupString)reasoning)

+
+ + +
+ @if (isLoading && string.IsNullOrEmpty(response) && string.IsNullOrEmpty(reasoning)) + { +
+
πŸ’¬ Response
+
+

+ + + + Reasoning in progress... +

+
-
+ } + @if (!string.IsNullOrEmpty(response)) + { +
+
+ πŸ’¬ Final Response + @if (isLoading) + { + + + + } +
+
+
@response
+
+
+ } + @if (!string.IsNullOrEmpty(reasoning)) + { +
+
🧠 Reasoning Trace & Token Usage
+
+
@((MarkupString)reasoning)
+
+
+ }
-} + +
@code { #pragma warning disable OPENAI001 @@ -48,8 +95,8 @@ protected override Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set in."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent17.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent17.razor index 09a12d6..de9f347 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent17.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent17.razor @@ -2,58 +2,94 @@ @using Markdig @inject IConfiguration Configuration -Agent 17 -

Agent 17 - Chain-of-Thought

-

Guides the model to reason step-by-step before arriving at a final answer, improving accuracy on complex problems.

+Agent 17 – Chain-of-Thought -
-
-
-
Configuration
+
+

🩷 Agent 17 – Chain-of-Thought

+

Guides the model to reason step-by-step before arriving at a final answer, improving accuracy on complex problems.

+
+ +
+ πŸ’‘ Chain-of-Thought (CoT): A prompting strategy where the model is instructed to break down its reasoning into explicit steps before reaching a conclusion. This improves accuracy on math, logic, and multi-step problems by externalising the reasoning process. +
+ +
+ + +
+
+
βš™οΈ Configuration
-
- - +
+ + +
+
+ +
-
- - +
+ +
- -
-
-@if (logMessages.Count > 0) -{ -
-
Log
-
-
    - @foreach (var log in logMessages) - { -
  • @log
    • - } -
-
+ +
+ @if (logMessages.Count > 0) + { +
+
πŸ“‹ Log
+
+
    + @foreach (var log in logMessages) + { +
  • @log
    • + } +
+
+
+ } + @if (isLoading && string.IsNullOrEmpty(response)) + { +
+
πŸ”— Chain-of-Thought Response
+
+

+ + + + Reasoning step-by-step... +

+
+
+ } + @if (!string.IsNullOrEmpty(response)) + { +
+
+ πŸ”— Chain-of-Thought Response + @if (isLoading) + { + + + + } +
+
+
@((MarkupString)response)
+
+
+ }
-} -@if (!string.IsNullOrEmpty(response)) -{ -
-
Response
-
-

@((MarkupString)response)

-
-
-} +
@code { private string message = "A farmer has 17 sheep. All but 9 run away. How many sheep does the farmer have left? Show your reasoning."; @@ -70,8 +106,8 @@ protected override Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { Endpoint = new Uri(endpoint) }; var credential = new ApiKeyCredential(apiKey); var chatClient = new ChatClient(modelName, credential, openAIClientOptions); diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent18.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent18.razor index 345375c..492c0e7 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent18.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent18.razor @@ -2,81 +2,107 @@ @using Markdig @inject IConfiguration Configuration -Agent 18 -

Agent 18 - Tree of Thoughts

-

Explores multiple reasoning branches simultaneously, evaluates each path, and selects the most promising solution.

- -
-
-
-
Configuration
-
-
- - -
- -
-
-
+Agent 18 – Tree of Thoughts + +
+

🩷 Agent 18 – Tree of Thoughts

+

Explores multiple reasoning branches simultaneously, evaluates each path, and selects the most promising solution.

-@if (logMessages.Count > 0) -{ -
-
Log
-
-
    - @foreach (var log in logMessages) - { -
  • @log
    • - } -
-
-
-} +
+ πŸ’‘ Tree of Thoughts (ToT): A prompting strategy that creates a tree-shaped reasoning structure by spawning multiple independent thought branches. Each branch explores a different perspective or approach, and an evaluator agent synthesises the best elements into a final solution. +
-@if (!string.IsNullOrEmpty(branchA)) -{ -
-
Branch A β€” Mathematical/Analytical
-
-

@((MarkupString)RenderMarkdown(branchA))

-
-
-} +
-@if (!string.IsNullOrEmpty(branchB)) -{ -
-
Branch B β€” Creative/Lateral
-
-

@((MarkupString)RenderMarkdown(branchB))

+ +
+
+
βš™οΈ Configuration
+
+
+ + +
+
+ Spawns 3 branches: Analytical Creative Practical +
+ +
+ @if (logMessages.Count > 0) + { +
+
πŸ“‹ Execution Log
+
+
    + @foreach (var log in logMessages) + { +
  • @log
    • + } +
+
+
+ }
-} -@if (!string.IsNullOrEmpty(branchC)) -{ -
-
Branch C β€” Practical/Common-Sense
-
-

@((MarkupString)RenderMarkdown(branchC))

-
+ +
+ @if (isLoading && string.IsNullOrEmpty(branchA)) + { +
+
🌳 Exploring Branches...
+
+

+ + + + Spawning thought branches... +

+
+
+ } + @if (!string.IsNullOrEmpty(branchA)) + { +
+
πŸ”΅ Branch A β€” Mathematical/Analytical
+
+
@((MarkupString)RenderMarkdown(branchA))
+
+
+ } + @if (!string.IsNullOrEmpty(branchB)) + { +
+
🟒 Branch B β€” Creative/Lateral
+
+
@((MarkupString)RenderMarkdown(branchB))
+
+
+ } + @if (!string.IsNullOrEmpty(branchC)) + { +
+
πŸ”· Branch C β€” Practical/Common-Sense
+
+
@((MarkupString)RenderMarkdown(branchC))
+
+
+ } + @if (!string.IsNullOrEmpty(evaluation)) + { +
+
βš–οΈ Evaluation & Final Solution
+
+
@((MarkupString)RenderMarkdown(evaluation))
+
+
+ }
-} -@if (!string.IsNullOrEmpty(evaluation)) -{ -
-
Evaluation & Final Solution
-
-

@((MarkupString)RenderMarkdown(evaluation))

-
-
-} +
@code { private string message = "How would you approach building a sustainable city transportation system?"; @@ -101,8 +127,8 @@ protected override Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { Endpoint = new Uri(endpoint) }; var credential = new ApiKeyCredential(apiKey); diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent19.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent19.razor index 6d5ab47..4bae726 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent19.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent19.razor @@ -2,81 +2,107 @@ @using Markdig @inject IConfiguration Configuration -Agent 19 -

Agent 19 - Graph of Thoughts

-

Builds a non-linear reasoning graph where thoughts can merge, branch, and reference each other to solve complex problems.

- -
-
-
-
Configuration
-
-
- - -
- -
-
-
+Agent 19 – Graph of Thoughts + +
+

🩷 Agent 19 – Graph of Thoughts

+

Builds a non-linear reasoning graph where thoughts can merge, branch, and reference each other to solve complex problems.

-@if (logMessages.Count > 0) -{ -
-
Log β€” Graph Edges
-
-
    - @foreach (var log in logMessages) - { -
  • @log
    • - } -
-
-
-} +
+ πŸ’‘ Graph of Thoughts (GoT): A prompting strategy that models reasoning as a directed graph. A decomposer breaks the problem into sub-problems (nodes), specialist agents solve each node in parallel, and a synthesizer merges the solutions along graph edges into a final answer. +
-@if (!string.IsNullOrEmpty(decomposed)) -{ -
-
Decomposer β€” Sub-problems
-
-

@((MarkupString)RenderMarkdown(decomposed))

-
-
-} +
-@if (!string.IsNullOrEmpty(node1Result)) -{ -
-
Node 1 β€” Sub-problem 1 Solution
-
-

@((MarkupString)RenderMarkdown(node1Result))

+ +
+
+
βš™οΈ Configuration
+
+
+ + +
+
+ Graph: Input β†’ Decomposer β†’ Node1, Node2 β†’ Synthesizer β†’ Output +
+ +
+ @if (logMessages.Count > 0) + { +
+
πŸ“‹ Graph Edges Log
+
+
    + @foreach (var log in logMessages) + { +
  • @log
    • + } +
+
+
+ }
-} -@if (!string.IsNullOrEmpty(node2Result)) -{ -
-
Node 2 β€” Sub-problem 2 Solution
-
-

@((MarkupString)RenderMarkdown(node2Result))

-
+ +
+ @if (isLoading && string.IsNullOrEmpty(decomposed)) + { +
+
πŸ•ΈοΈ Building Graph...
+
+

+ + + + Decomposing into sub-problems... +

+
+
+ } + @if (!string.IsNullOrEmpty(decomposed)) + { +
+
πŸ“ Decomposer β€” Sub-problems
+
+
@((MarkupString)RenderMarkdown(decomposed))
+
+
+ } + @if (!string.IsNullOrEmpty(node1Result)) + { +
+
πŸ”· Node 1 β€” Sub-problem 1 Solution
+
+
@((MarkupString)RenderMarkdown(node1Result))
+
+
+ } + @if (!string.IsNullOrEmpty(node2Result)) + { +
+
πŸ”Ά Node 2 β€” Sub-problem 2 Solution
+
+
@((MarkupString)RenderMarkdown(node2Result))
+
+
+ } + @if (!string.IsNullOrEmpty(synthesis)) + { +
+
πŸ”— Synthesizer β€” Graph Synthesis
+
+
@((MarkupString)RenderMarkdown(synthesis))
+
+
+ }
-} -@if (!string.IsNullOrEmpty(synthesis)) -{ -
-
Synthesizer β€” Graph Synthesis
-
-

@((MarkupString)RenderMarkdown(synthesis))

-
-
-} +
@code { private string message = "Design an AI system that can both understand medical images and explain its diagnoses to patients."; @@ -101,8 +127,8 @@ protected override Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { Endpoint = new Uri(endpoint) }; var credential = new ApiKeyCredential(apiKey); diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent20.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent20.razor index a4afc5f..8d9ca09 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent20.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent20.razor @@ -2,61 +2,89 @@ @using Markdig @inject IConfiguration Configuration -Agent 20 -

Agent 20 - Program of Thoughts (PoT)

-

Generates executable pseudocode or step-by-step algorithmic logic to solve problems, separating computation from reasoning.

- -
-
-
-
Configuration
+Agent 20 – Program of Thoughts + +
+

🩷 Agent 20 – Program of Thoughts (PoT)

+

Generates executable pseudocode or step-by-step algorithmic logic to solve problems, separating computation from reasoning.

+
+ +
+ πŸ’‘ Program of Thoughts (PoT): A prompting strategy that separates reasoning from computation. The model writes a pseudocode program to solve the problem (the "program"), then a separate interpreter agent traces through each step to execute it and derive the final result. +
+ +
+ + +
+
+
βš™οΈ Configuration
-
- - +
+ + +
+
+ Pipeline: Programmer β†’ Interpreter
-
+ @if (logMessages.Count > 0) + { +
+
πŸ“‹ Log
+
+
    + @foreach (var log in logMessages) + { +
  • @log
    • + } +
+
+
+ }
-
- -@if (logMessages.Count > 0) -{ -
-
Log
-
-
    - @foreach (var log in logMessages) - { -
  • @log
    • - } -
-
-
-} -@if (!string.IsNullOrEmpty(programOutput)) -{ -
-
Program (Pseudocode)
-
- 
@programOutput
-
+ +
+ @if (isLoading && string.IsNullOrEmpty(programOutput)) + { +
+
πŸ’» Generating Program...
+
+

+ + + + Writing pseudocode... +

+
+
+ } + @if (!string.IsNullOrEmpty(programOutput)) + { +
+
πŸ“ Program (Pseudocode)
+
+ 
@programOutput
+
+
+ } + @if (!string.IsNullOrEmpty(executionTrace)) + { +
+
▢️ Execution Trace
+
+
@((MarkupString)RenderMarkdown(executionTrace))
+
+
+ }
-} -@if (!string.IsNullOrEmpty(executionTrace)) -{ -
-
Execution Trace
-
-

@((MarkupString)RenderMarkdown(executionTrace))

-
-
-} +
@code { private string message = "Calculate the sum of all even numbers between 1 and 20, then multiply by the count of odd numbers in the same range."; @@ -77,8 +105,8 @@ protected override Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { Endpoint = new Uri(endpoint) }; var credential = new ApiKeyCredential(apiKey); diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent21.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent21.razor index 92302c6..41f1ab4 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent21.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent21.razor @@ -3,54 +3,93 @@ @using System.ComponentModel @inject IConfiguration Configuration -Agent 21 -

Agent 21 - ReAct (Reason + Act)

-

Interleaves reasoning traces with action execution, allowing the agent to think, act, observe, and iterate toward a solution.

- -
-
-
-
Configuration
+Agent 21 – ReAct + +
+

🩷 Agent 21 – ReAct (Reason + Act)

+

Interleaves reasoning traces with action execution, allowing the agent to think, act, observe, and iterate toward a solution.

+
+ +
+ πŸ’‘ ReAct (Reason + Act): A prompting strategy that interleaves reasoning traces with tool-use actions. The agent cycles through: Thought (what to do and why) β†’ Action (calling a tool) β†’ Observation (what the tool returned), repeating until it reaches a Final Answer. +
+ +
+ + +
+
+
βš™οΈ Configuration
-
- - +
+ + +
+
+ Tools: SearchWeb Calculate LookupFact +
+
+ +
- -
+ @if (logMessages.Count > 0) + { +
+
πŸ”¨ Tool Invocations
+
+
    + @foreach (var log in logMessages) + { +
  • @log
    • + } +
+
+
+ }
-
-@if (logMessages.Count > 0) -{ -
-
Log β€” Tool Invocations
-
-
    - @foreach (var log in logMessages) - { -
  • @log
    • - } -
-
+ +
+ @if (isLoading && string.IsNullOrEmpty(response)) + { +
+
⚑ Thought β†’ Action β†’ Observation...
+
+

+ + + + Running ReAct loop... +

+
+
+ } + @if (!string.IsNullOrEmpty(response)) + { +
+
+ ⚑ Thought β†’ Action β†’ Observation Loop + @if (isLoading) + { + + + + } +
+
+
@((MarkupString)response)
+
+
+ }
-} -@if (!string.IsNullOrEmpty(response)) -{ -
-
Response β€” Thought β†’ Action β†’ Observation Loop
-
-

@((MarkupString)response)

-
-
-} +
@code { #pragma warning disable MEAI001 @@ -67,8 +106,8 @@ protected override Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { Endpoint = new Uri(endpoint) }; var credential = new ApiKeyCredential(apiKey); var chatClient = new ChatClient(modelName, credential, openAIClientOptions); diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent22.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent22.razor index dc736a9..276c9d2 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent22.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent22.razor @@ -2,61 +2,103 @@ @using Markdig @inject IConfiguration Configuration -Agent 22 -

Agent 22 - Reflection / Self-Critique

-

The agent generates an initial response, then critically evaluates its own output for errors, gaps, and improvements.

- -
-
-
-
Configuration
+Agent 22 – Reflection + +
+

🩷 Agent 22 – Reflection / Self-Critique

+

The agent generates an initial response, then critically evaluates its own output for errors, gaps, and improvements.

+
+ +
+ πŸ’‘ Reflection: A prompting strategy where a second "critic" agent evaluates the initial response from a "responder" agent. The critic identifies errors, missing points, and rates quality β€” producing a structured self-critique that highlights areas for improvement. +
+ +
+ + +
+
+
βš™οΈ Configuration
-
- - +
+ + +
+
+ Pipeline: Responder β†’ Critic
-
+ @if (logMessages.Count > 0) + { +
+
πŸ“‹ Log
+
+
    + @foreach (var log in logMessages) + { +
  • @log
    • + } +
+
+
+ }
-
- -@if (logMessages.Count > 0) -{ -
-
Log
-
-
    - @foreach (var log in logMessages) - { -
  • @log
    • - } -
-
-
-} -@if (!string.IsNullOrEmpty(initialResponse)) -{ -
-
Initial Response
-
-

@((MarkupString)RenderMarkdown(initialResponse))

-
+ +
+ @if (isLoading && string.IsNullOrEmpty(initialResponse)) + { +
+
πŸͺž Generating Initial Response...
+
+

+ + + + Generating initial response... +

+
+
+ } + @if (!string.IsNullOrEmpty(initialResponse)) + { +
+
πŸ’¬ Initial Response
+
+
@((MarkupString)RenderMarkdown(initialResponse))
+
+
+ } + @if (isLoading && !string.IsNullOrEmpty(initialResponse) && string.IsNullOrEmpty(critique)) + { +
+
πŸ” Applying Self-Critique...
+
+

+ + + + Critiquing... +

+
+
+ } + @if (!string.IsNullOrEmpty(critique)) + { +
+
πŸ” Self-Critique
+
+
@((MarkupString)RenderMarkdown(critique))
+
+
+ }
-} -@if (!string.IsNullOrEmpty(critique)) -{ -
-
Self-Critique
-
-

@((MarkupString)RenderMarkdown(critique))

-
-
-} +
@code { private string message = "Explain the concept of quantum entanglement and its potential applications."; @@ -77,8 +119,8 @@ protected override Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { Endpoint = new Uri(endpoint) }; var credential = new ApiKeyCredential(apiKey); diff --git a/0-Agents/AgentsWebUI/Components/Pages/Agent23.razor b/0-Agents/AgentsWebUI/Components/Pages/Agent23.razor index f51c6c1..4cad86b 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Agent23.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Agent23.razor @@ -2,71 +2,98 @@ @using Markdig @inject IConfiguration Configuration -Agent 23 -

Agent 23 - Self-Refine

-

Iteratively improves its own output through multiple refinement rounds, each time incorporating feedback from its own critique.

- -
-
-
-
Configuration
+Agent 23 – Self-Refine + +
+

🩷 Agent 23 – Self-Refine

+

Iteratively improves its own output through multiple refinement rounds, each time incorporating feedback from its own critique.

+
+ +
+ πŸ’‘ Self-Refine: A prompting strategy that iterates through a Generate β†’ Critique β†’ Refine loop. A generator produces an initial draft, a critic provides targeted feedback, and a refiner incorporates that feedback. This repeats for multiple rounds, progressively improving quality. +
+ +
+ + +
+
+
βš™οΈ Configuration
-
- - +
+ +
-
+ @if (logMessages.Count > 0) + { +
+
πŸ“‹ Refinement Log
+
+
    + @foreach (var log in logMessages) + { +
  • @log
    • + } +
+
+
+ }
-
- -@if (logMessages.Count > 0) -{ -
-
Log
-
-
    - @foreach (var log in logMessages) - { -
  • @log
    • - } -
-
-
-} - -@if (!string.IsNullOrEmpty(initialDraft)) -{ -
-
Initial Draft
-
-

@((MarkupString)RenderMarkdown(initialDraft))

-
-
-} -@if (!string.IsNullOrEmpty(round1Refined)) -{ -
-
Round 1 Refined
-
-

@((MarkupString)RenderMarkdown(round1Refined))

-
+ +
+ @if (isLoading && string.IsNullOrEmpty(initialDraft)) + { +
+
✨ Generating Initial Draft...
+
+

+ + + + Generating initial draft... +

+
+
+ } + @if (!string.IsNullOrEmpty(initialDraft)) + { +
+
πŸ“ Initial Draft
+
+
@((MarkupString)RenderMarkdown(initialDraft))
+
+
+ } + @if (!string.IsNullOrEmpty(round1Refined)) + { +
+
✏️ Round 1 β€” Refined
+
+
@((MarkupString)RenderMarkdown(round1Refined))
+
+
+ } + @if (!string.IsNullOrEmpty(round2Refined)) + { +
+
βœ… Round 2 β€” Final Refined Output
+
+
@((MarkupString)RenderMarkdown(round2Refined))
+
+
+ }
-} -@if (!string.IsNullOrEmpty(round2Refined)) -{ -
-
Round 2 Refined (Final)
-
-

@((MarkupString)RenderMarkdown(round2Refined))

-
-
-} +
@code { private string message = "Write a brief explanation of machine learning for a high school student."; @@ -89,8 +116,8 @@ protected override Task OnInitializedAsync() { - var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ?? - throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set."); + var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ?? + throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured."); var openAIClientOptions = new OpenAIClientOptions { Endpoint = new Uri(endpoint) }; var credential = new ApiKeyCredential(apiKey); diff --git a/0-Agents/AgentsWebUI/Components/Pages/Error.razor b/0-Agents/AgentsWebUI/Components/Pages/Error.razor index 576cc2d..4630df2 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Error.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Error.razor @@ -3,26 +3,37 @@ Error -

Error.

-

An error occurred while processing your request.

- -@if (ShowRequestId) -{ -

- Request ID: @RequestId -

-} +
+

⚠️ An Error Occurred

+

An error occurred while processing your request.

+
+ +
+
πŸ”΄ Error Details
+
+ @if (ShowRequestId) + { +

+ Request ID: @RequestId +

+ } + +
+ Something went wrong. If this problem persists, please try reloading the page. +
-

Development Mode

-

- Swapping to Development environment will display more detailed information about the error that occurred. -

-

- The Development environment shouldn't be enabled for deployed applications. - It can result in displaying sensitive information from exceptions to end users. - For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development - and restarting the app. -

+
Development Mode
+

+ Swapping to Development environment will display more detailed information about the error that occurred. +

+

+ The Development environment shouldn't be enabled for deployed applications. + It can result in displaying sensitive information from exceptions to end users. + For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development + and restarting the app. +

+
+
@code{ [CascadingParameter] diff --git a/0-Agents/AgentsWebUI/Components/Pages/Home.razor b/0-Agents/AgentsWebUI/Components/Pages/Home.razor index 694d36f..c2b8787 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/Home.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/Home.razor @@ -5,22 +5,21 @@
-
+
- +

Microsoft Agent Framework Samples

-

- Explore 16 interactive samples that demonstrate the capabilities of the +

+ Explore 23 interactive samples that demonstrate the capabilities of the Microsoft Agent Framework in a Blazor Web Application on .NET 10.

- .NET 10 - Blazor - OpenAI - MCP - Semantic Kernel + .NET 10 + Blazor + OpenAI + MCP + Semantic Kernel
@@ -45,7 +44,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -62,7 +61,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -79,7 +78,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -107,7 +106,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -124,7 +123,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -141,7 +140,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -158,7 +157,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -185,7 +184,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -202,7 +201,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -219,7 +218,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -247,7 +246,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -264,7 +263,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -281,7 +280,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -309,7 +308,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -326,7 +325,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -343,7 +342,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -370,7 +369,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -386,7 +385,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -402,7 +401,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -418,7 +417,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -434,7 +433,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -450,7 +449,7 @@

- Explore Sample β†’ + Explore Sample β†’
@@ -466,7 +465,7 @@

- Explore Sample β†’ + Explore Sample β†’
diff --git a/0-Agents/AgentsWebUI/Components/Pages/Home.razor.css b/0-Agents/AgentsWebUI/Components/Pages/Home.razor.css deleted file mode 100644 index 8e33ade..0000000 --- a/0-Agents/AgentsWebUI/Components/Pages/Home.razor.css +++ /dev/null @@ -1,72 +0,0 @@ -/* ────────────────────────────────────────── - Agent card base -────────────────────────────────────────── */ -.agent-card { - transition: transform 0.18s ease, box-shadow 0.18s ease; - border-top-width: 4px; - border-top-style: solid; -} - -.agent-card:hover { - transform: translateY(-4px); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); -} - -/* ────────────────────────────────────────── - Category colour themes - Applied via a wrapper class on the section -────────────────────────────────────────── */ - -/* Basics β€” Bootstrap primary blue */ -.cat-basics .agent-card { border-top-color: #0d6efd; } -.cat-basics .agent-badge { background-color: #0d6efd; color: #fff; } - -/* Functions & Tools β€” Bootstrap success green */ -.cat-functions .agent-card { border-top-color: #198754; } -.cat-functions .agent-badge { background-color: #198754; color: #fff; } - -/* Storage & Persistence β€” Bootstrap info teal */ -.cat-storage .agent-card { border-top-color: #087990; } -.cat-storage .agent-badge { background-color: #087990; color: #fff; } - -/* Multimodal & External β€” Bootstrap purple */ -.cat-multimodal .agent-card { border-top-color: #6f42c1; } -.cat-multimodal .agent-badge { background-color: #6f42c1; color: #fff; } - -/* Advanced Features β€” Bootstrap orange */ -.cat-advanced .agent-card { border-top-color: #fd7e14; } -.cat-advanced .agent-badge { background-color: #fd7e14; color: #fff; } - -/* ────────────────────────────────────────── - Category section header underline -────────────────────────────────────────── */ -.cat-basics .category-header { border-bottom: 2px solid #0d6efd; } -.cat-functions .category-header { border-bottom: 2px solid #198754; } -.cat-storage .category-header { border-bottom: 2px solid #087990; } -.cat-multimodal .category-header { border-bottom: 2px solid #6f42c1; } -.cat-advanced .category-header { border-bottom: 2px solid #fd7e14; } - -/* ────────────────────────────────────────── - Category badge count pill -────────────────────────────────────────── */ -.cat-basics .cat-count-badge { background-color: #0d6efd; } -.cat-functions .cat-count-badge { background-color: #198754; } -.cat-storage .cat-count-badge { background-color: #087990; } -.cat-multimodal .cat-count-badge { background-color: #6f42c1; } -.cat-advanced .cat-count-badge { background-color: #fd7e14; } - -/* ────────────────────────────────────────── - Purple CTA button for multimodal category -────────────────────────────────────────── */ -.btn-purple { - background-color: #6f42c1; - border-color: #6f42c1; - color: #fff; -} - -.btn-purple:hover, -.btn-purple:focus { - background-color: #5a32a3; - border-color: #5a32a3; - color: #fff; -} diff --git a/0-Agents/AgentsWebUI/Components/Pages/NotFound.razor b/0-Agents/AgentsWebUI/Components/Pages/NotFound.razor index 917ada1..beccec1 100644 --- a/0-Agents/AgentsWebUI/Components/Pages/NotFound.razor +++ b/0-Agents/AgentsWebUI/Components/Pages/NotFound.razor @@ -1,5 +1,18 @@ ο»Ώ@page "/not-found" @layout MainLayout -

Not Found

-

Sorry, the content you are looking for does not exist.

\ No newline at end of file +Page Not Found + +
+

πŸ” Page Not Found

+

The page you're looking for doesn't exist or has been moved.

+
+ +
+
+
+ Sorry, we couldn't find what you were looking for. The page may have been moved or the URL may be incorrect. +
+ ← Back to Home +
+
diff --git a/0-Agents/AgentsWebUI/appsettings.json b/0-Agents/AgentsWebUI/appsettings.json index d56ffe8..f322d20 100644 --- a/0-Agents/AgentsWebUI/appsettings.json +++ b/0-Agents/AgentsWebUI/appsettings.json @@ -1,5 +1,7 @@ { - "OPEN_ROUTER_API_KEY": "YOUR_OPENROUTER_API_KEY", + "OpenRouter": { + "ApiKey": "YOUR_OPENROUTER_API_KEY" + }, "Logging": { "LogLevel": { "Default": "Information", diff --git a/0-Agents/AgentsWebUI/wwwroot/app.css b/0-Agents/AgentsWebUI/wwwroot/app.css index 73a69d6..899093d 100644 --- a/0-Agents/AgentsWebUI/wwwroot/app.css +++ b/0-Agents/AgentsWebUI/wwwroot/app.css @@ -1,60 +1,1315 @@ +/* ============================================================================= + AGENT FRAMEWORK SAMPLES β€” CENTRAL DESIGN SYSTEM + app.css | All component classes live here; per-page CSS files can be removed. + ============================================================================= + + TABLE OF CONTENTS + 1. CSS Custom Properties (Design Tokens) + 2. Reset / Base + 3. Layout (sidebar, main, top-row) + 4. Navigation Menu + 5. Hero Banner (Home page) + 6. Category Sections (Home page) + 7. Agent Cards (Home page grid) + 8. Page Header (Agent pages) + 9. Panel / Card (Agent pages β€” config, result, log, thread) + 10. Form Controls + 11. Buttons + 12. Badges & Tags + 13. Code & Pre blocks + 14. Loading / Spinner + 15. Alert & Notification + 16. Chat Message Bubbles + 17. Responsive Utilities + 18. Blazor Error Boundary / Validation / Misc + ============================================================================= */ + + +/* ───────────────────────────────────────────────────────────────────────────── + 1. CSS Custom Properties (Design Tokens) + ───────────────────────────────────────────────────────────────────────────── */ +:root { + /* ── Color Palette ── */ + + /* Primary brand β€” Microsoft deep blue */ + --color-primary: #1b6ec2; + --color-primary-dark: #1361ac; + --color-primary-darker: #0e4d8a; + --color-primary-light: #4a90d9; + --color-primary-subtle: #e8f1fb; + + /* Sidebar gradient anchors */ + --color-sidebar-start: #052767; + --color-sidebar-end: #3a0647; + + /* Semantic colours (mirroring Bootstrap 5 palette for harmony) */ + --color-success: #198754; + --color-success-subtle: #d1e7dd; + --color-info: #087990; + --color-info-subtle: #cff4fc; + --color-warning: #fd7e14; + --color-warning-subtle: #fff3cd; + --color-danger: #dc3545; + --color-danger-subtle: #f8d7da; + --color-purple: #6f42c1; + --color-purple-subtle: #e8d5f5; + --color-pink: #e83e8c; + --color-pink-subtle: #fce4ef; + + /* Neutral scale */ + --color-white: #ffffff; + --color-gray-50: #f8f9fa; + --color-gray-100: #f1f3f5; + --color-gray-200: #e9ecef; + --color-gray-300: #dee2e6; + --color-gray-400: #ced4da; + --color-gray-500: #adb5bd; + --color-gray-600: #6c757d; + --color-gray-700: #495057; + --color-gray-800: #343a40; + --color-gray-900: #212529; + --color-black: #000000; + + /* Surface colours */ + --color-surface: #ffffff; + --color-surface-alt: #f8f9fa; + --color-border: #dee2e6; + --color-border-subtle: #e9ecef; + + /* ── Category accent colours ── */ + --color-cat-basics: #0d6efd; /* Bootstrap primary */ + --color-cat-functions: #198754; /* Bootstrap success */ + --color-cat-storage: #087990; /* Bootstrap info dark */ + --color-cat-multimodal: #6f42c1; /* Bootstrap purple */ + --color-cat-advanced: #fd7e14; /* Bootstrap orange */ + --color-cat-prompting: #e83e8c; /* Bootstrap pink */ + + /* ── Typography ── */ + --font-family-base: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; + --font-family-mono: 'Cascadia Code', 'Consolas', 'Courier New', monospace; + + --font-size-xs: 0.75rem; /* 12px */ + --font-size-sm: 0.875rem; /* 14px */ + --font-size-base: 1rem; /* 16px */ + --font-size-md: 1.0625rem; /* 17px */ + --font-size-lg: 1.125rem; /* 18px */ + --font-size-xl: 1.25rem; /* 20px */ + --font-size-2xl: 1.5rem; /* 24px */ + --font-size-3xl: 1.875rem; /* 30px */ + --font-size-4xl: 2.25rem; /* 36px */ + --font-size-5xl: 2.5rem; /* 40px */ + + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + + --line-height-tight: 1.25; + --line-height-base: 1.5; + --line-height-relaxed: 1.75; + + /* ── Spacing scale (multiples of 4 px) ── */ + --space-1: 0.25rem; /* 4px */ + --space-2: 0.5rem; /* 8px */ + --space-3: 0.75rem; /* 12px */ + --space-4: 1rem; /* 16px */ + --space-5: 1.25rem; /* 20px */ + --space-6: 1.5rem; /* 24px */ + --space-8: 2rem; /* 32px */ + --space-10: 2.5rem; /* 40px */ + --space-12: 3rem; /* 48px */ + --space-16: 4rem; /* 64px */ + + /* ── Border radius ── */ + --radius-sm: 0.25rem; /* 4px */ + --radius-md: 0.375rem; /* 6px */ + --radius-lg: 0.5rem; /* 8px */ + --radius-xl: 0.75rem; /* 12px */ + --radius-2xl: 1rem; /* 16px */ + --radius-pill: 50rem; + + /* ── Shadows ── */ + --shadow-xs: 0 1px 2px rgba(0,0,0,.06); + --shadow-sm: 0 1px 4px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); + --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04); + --shadow-lg: 0 8px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06); + --shadow-xl: 0 16px 40px rgba(0,0,0,.12), 0 6px 12px rgba(0,0,0,.08); + --shadow-inset: inset 0 1px 3px rgba(0,0,0,.08); + + /* ── Layout dimensions ── */ + --sidebar-width: 250px; + --toprow-height: 3.5rem; + --content-max-width: 1200px; + + /* ── Transitions ── */ + --transition-fast: 0.12s ease; + --transition-base: 0.18s ease; + --transition-slow: 0.3s ease; +} + + +/* ───────────────────────────────────────────────────────────────────────────── + 2. Reset / Base + ───────────────────────────────────────────────────────────────────────────── */ +*, *::before, *::after { + box-sizing: border-box; +} + html, body { - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-family: var(--font-family-base); + font-size: var(--font-size-base); + color: var(--color-gray-900); + background-color: var(--color-gray-50); + line-height: var(--line-height-base); +} + +h1:focus { + outline: none; } a, .btn-link { - color: #006bb7; + color: var(--color-primary); + text-decoration: none; } -.btn-primary { - color: #fff; - background-color: #1b6ec2; - border-color: #1861ac; +a:hover, .btn-link:hover { + color: var(--color-primary-dark); + text-decoration: underline; } -.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { - box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; +/* Focus ring β€” consistent outline for all interactive elements */ +.btn:focus, +.btn:active:focus, +.btn-link.nav-link:focus, +.form-control:focus, +.form-check-input:focus { + box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-primary-light); + outline: none; } .content { padding-top: 1.1rem; } -h1:focus { + +/* ───────────────────────────────────────────────────────────────────────────── + 3. Layout β€” page, sidebar, main, top-row + ───────────────────────────────────────────────────────────────────────────── */ + +/* Main content background */ +main > article.content { + background-color: var(--color-surface); + min-height: calc(100vh - var(--toprow-height)); +} + +/* Sidebar scrollbar styling (Webkit) */ +.nav-scrollable::-webkit-scrollbar { + width: 4px; +} + +.nav-scrollable::-webkit-scrollbar-track { + background: transparent; +} + +.nav-scrollable::-webkit-scrollbar-thumb { + background: rgba(255,255,255,0.2); + border-radius: var(--radius-pill); +} + + +/* ───────────────────────────────────────────────────────────────────────────── + 4. Navigation Menu + ───────────────────────────────────────────────────────────────────────────── */ + +/* Brand logo area */ +.navbar-brand { + font-size: 1.1rem; + font-weight: var(--font-weight-semibold); + letter-spacing: -0.01em; +} + +/* Category headers inside the nav */ +.nav-category-header { + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + letter-spacing: 0.08em; + text-transform: uppercase; + padding: var(--space-2) 0 var(--space-1) 0; + pointer-events: none; + user-select: none; + opacity: 0.95; +} + +/* Divider between nav groups */ +.nav-divider { + border: none; + border-top: 1px solid rgba(255,255,255,0.1); + margin: 0.15rem 1rem; +} + +/* Nav icon emoji wrapper */ +.nav-icon { + display: inline-block; + width: 1.4rem; + text-align: center; + margin-right: var(--space-1); +} + + +/* ───────────────────────────────────────────────────────────────────────────── + 5. Hero Banner (Home page) + ───────────────────────────────────────────────────────────────────────────── */ + +.hero-banner { + background: linear-gradient(135deg, + var(--color-sidebar-start) 0%, + var(--color-primary) 60%, + var(--color-sidebar-end) 100%); + color: var(--color-white); + border-radius: var(--radius-2xl); + padding: var(--space-10) var(--space-8); + box-shadow: var(--shadow-xl); + position: relative; + overflow: hidden; +} + +/* Subtle radial glow in hero */ +.hero-banner::before { + content: ''; + position: absolute; + top: -40px; right: -40px; + width: 260px; height: 260px; + background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%); + pointer-events: none; +} + +.hero-banner h1 { + font-size: clamp(1.5rem, 4vw, var(--font-size-4xl)); + font-weight: var(--font-weight-bold); + line-height: var(--line-height-tight); + letter-spacing: -0.02em; +} + +.hero-banner .lead { + opacity: 0.9; + max-width: 680px; + font-size: var(--font-size-lg); +} + +/* Hero icon (robot emoji beside the h1) */ +.hero-icon { + font-size: var(--font-size-5xl); +} + +/* Pill badges inside hero */ +.hero-badge { + background: rgba(255,255,255,0.18); + color: var(--color-white); + font-size: var(--font-size-sm); + border-radius: var(--radius-pill); + padding: var(--space-1) var(--space-3); + font-weight: var(--font-weight-medium); + border: 1px solid rgba(255,255,255,0.25); + backdrop-filter: blur(4px); +} + + +/* ───────────────────────────────────────────────────────────────────────────── + 6. Category Sections (Home page) + ───────────────────────────────────────────────────────────────────────────── */ + +.agent-category { + margin-bottom: var(--space-12); +} + +/* Category section title row */ +.category-header { + display: flex; + align-items: center; + gap: var(--space-2); + padding-bottom: var(--space-2); + margin-bottom: var(--space-4); +} + +.category-header h2 { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-semibold); + margin: 0; +} + +.category-icon { + font-size: 1.4rem; + line-height: 1; +} + +/* Count pill next to category title */ +.cat-count-badge { + font-size: var(--font-size-xs); + font-weight: var(--font-weight-semibold); + color: var(--color-white); + border-radius: var(--radius-pill); + padding: 0.2em 0.65em; +} + +/* ── Per-category theming ── */ + +/* Basics β€” Blue */ +.cat-basics .category-header { border-bottom: 2px solid var(--color-cat-basics); } +.cat-basics .cat-count-badge { background-color: var(--color-cat-basics); } +.cat-basics .agent-card { border-top-color: var(--color-cat-basics); } +.cat-basics .agent-badge { background-color: var(--color-cat-basics); color: var(--color-white); } +.cat-basics .btn-cat { background-color: var(--color-cat-basics); border-color: var(--color-cat-basics); color: var(--color-white); } +.cat-basics .btn-cat:hover { background-color: #0b5ed7; border-color: #0b5ed7; } + +/* Functions & Tools β€” Green */ +.cat-functions .category-header { border-bottom: 2px solid var(--color-cat-functions); } +.cat-functions .cat-count-badge { background-color: var(--color-cat-functions); } +.cat-functions .agent-card { border-top-color: var(--color-cat-functions); } +.cat-functions .agent-badge { background-color: var(--color-cat-functions); color: var(--color-white); } +.cat-functions .btn-cat { background-color: var(--color-cat-functions); border-color: var(--color-cat-functions); color: var(--color-white); } +.cat-functions .btn-cat:hover { background-color: #157347; border-color: #157347; } + +/* Storage & Persistence β€” Teal */ +.cat-storage .category-header { border-bottom: 2px solid var(--color-cat-storage); } +.cat-storage .cat-count-badge { background-color: var(--color-cat-storage); } +.cat-storage .agent-card { border-top-color: var(--color-cat-storage); } +.cat-storage .agent-badge { background-color: var(--color-cat-storage); color: var(--color-white); } +.cat-storage .btn-cat { background-color: var(--color-cat-storage); border-color: var(--color-cat-storage); color: var(--color-white); } +.cat-storage .btn-cat:hover { background-color: #065f72; border-color: #065f72; } + +/* Multimodal & External β€” Purple */ +.cat-multimodal .category-header { border-bottom: 2px solid var(--color-cat-multimodal); } +.cat-multimodal .cat-count-badge { background-color: var(--color-cat-multimodal); } +.cat-multimodal .agent-card { border-top-color: var(--color-cat-multimodal); } +.cat-multimodal .agent-badge { background-color: var(--color-cat-multimodal); color: var(--color-white); } +.cat-multimodal .btn-cat { background-color: var(--color-cat-multimodal); border-color: var(--color-cat-multimodal); color: var(--color-white); } +.cat-multimodal .btn-cat:hover { background-color: #5a32a3; border-color: #5a32a3; } + +/* Advanced Features β€” Orange */ +.cat-advanced .category-header { border-bottom: 2px solid var(--color-cat-advanced); } +.cat-advanced .cat-count-badge { background-color: var(--color-cat-advanced); } +.cat-advanced .agent-card { border-top-color: var(--color-cat-advanced); } +.cat-advanced .agent-badge { background-color: var(--color-cat-advanced); color: var(--color-white); } +.cat-advanced .btn-cat { background-color: var(--color-cat-advanced); border-color: var(--color-cat-advanced); color: var(--color-white); } +.cat-advanced .btn-cat:hover { background-color: #e36b05; border-color: #e36b05; } + +/* Prompting Strategies β€” Pink */ +.cat-prompting .category-header { border-bottom: 2px solid var(--color-cat-prompting); } +.cat-prompting .cat-count-badge { background-color: var(--color-cat-prompting); } +.cat-prompting .agent-card { border-top-color: var(--color-cat-prompting); } +.cat-prompting .agent-badge { background-color: var(--color-cat-prompting); color: var(--color-white); } +.cat-prompting .btn-cat { background-color: var(--color-cat-prompting); border-color: var(--color-cat-prompting); color: var(--color-white); } +.cat-prompting .btn-cat:hover { background-color: #c72d7c; border-color: #c72d7c; } + + +/* ───────────────────────────────────────────────────────────────────────────── + 7. Agent Cards (Home page grid) + ───────────────────────────────────────────────────────────────────────────── */ + +.agent-card { + border-top-width: 4px; + border-top-style: solid; + /* border-top-color set by category wrapper .cat-* */ + background-color: var(--color-surface); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + transition: + transform var(--transition-base), + box-shadow var(--transition-base); + overflow: hidden; +} + +.agent-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); +} + +.agent-card .card-title { + font-size: var(--font-size-md); + font-weight: var(--font-weight-semibold); + color: var(--color-gray-900); +} + +.agent-card .card-text { + font-size: var(--font-size-sm); + color: var(--color-gray-600); + line-height: var(--line-height-relaxed); +} + +/* Badge on the card (top-right corner) */ +.agent-badge { + font-size: var(--font-size-xs); + font-weight: var(--font-weight-semibold); + border-radius: var(--radius-pill); + padding: 0.2em 0.6em; + letter-spacing: 0.02em; + /* background & color set by .cat-* wrapper */ +} + +.agent-card .card-footer { + background: transparent; + border: none; + padding-top: 0; +} + + +/* ───────────────────────────────────────────────────────────────────────────── + 8. Page Header (Agent detail pages) + ───────────────────────────────────────────────────────────────────────────── */ + +.page-header { + margin-bottom: var(--space-6); + padding-bottom: var(--space-4); + border-bottom: 1px solid var(--color-border-subtle); +} + +.page-header h1, +.page-title { + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-bold); + color: var(--color-gray-900); + line-height: var(--line-height-tight); + margin-bottom: var(--space-2); +} + +.page-header .page-subtitle, +.page-subtitle { + font-size: var(--font-size-md); + color: var(--color-gray-600); + line-height: var(--line-height-relaxed); + max-width: 720px; + margin: 0; +} + +/* lead paragraph under h1 (used in agent pages) */ +p.lead { + font-size: var(--font-size-md); + color: var(--color-gray-600); + line-height: var(--line-height-relaxed); +} + + +/* ───────────────────────────────────────────────────────────────────────────── + 9. Panel / Card (Agent pages β€” config, result, log, thread) + ───────────────────────────────────────────────────────────────────────────── */ + +/* Base panel (wraps Bootstrap .card) */ +.panel { + background-color: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + margin-bottom: var(--space-4); + overflow: hidden; +} + +.panel > .card-header, +.panel-header { + background-color: var(--color-gray-50); + border-bottom: 1px solid var(--color-border-subtle); + padding: var(--space-3) var(--space-4); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-gray-700); + text-transform: uppercase; + letter-spacing: 0.05em; + display: flex; + align-items: center; + gap: var(--space-2); +} + +.panel > .card-body, +.panel-body { + padding: var(--space-4) var(--space-5); +} + +/* Configuration input panel */ +.panel-config > .card-header, +.panel-config > .panel-header { + background-color: #f0f4ff; + border-bottom-color: #c6d5f7; + color: var(--color-primary-dark); +} + +/* Response / result panel */ +.panel-result > .card-header, +.panel-result > .panel-header { + background-color: #f0fff4; + border-bottom-color: #b7dfc8; + color: var(--color-success); +} + +/* Log panel */ +.panel-log > .card-header, +.panel-log > .panel-header { + background-color: #fffbf0; + border-bottom-color: #f0e0ab; + color: #856404; +} + +/* Thread / data panel */ +.panel-thread > .card-header, +.panel-thread > .panel-header { + background-color: #f3f0ff; + border-bottom-color: #c8b8f7; + color: var(--color-purple); +} + +/* Danger / error panel */ +.panel-danger > .card-header, +.panel-danger > .panel-header { + background-color: #fff0f0; + border-bottom-color: #f5c6c8; + color: var(--color-danger); +} + +/* General result / response text styling */ +.response-text { + white-space: pre-wrap; + font-size: var(--font-size-base); + line-height: var(--line-height-relaxed); + color: var(--color-gray-800); +} + +/* Log line list */ +.log-list { + list-style: none; + padding: 0; + margin: 0; +} + +.log-list li { + padding: var(--space-1) var(--space-2); + border-bottom: 1px solid var(--color-border-subtle); + font-size: var(--font-size-sm); + color: var(--color-gray-600); + font-family: var(--font-family-mono); +} + +.log-list li:last-child { + border-bottom: none; +} + + +/* ───────────────────────────────────────────────────────────────────────────── + 10. Form Controls + ───────────────────────────────────────────────────────────────────────────── */ + +/* Consistent label style */ +.form-label { + font-size: var(--font-size-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-gray-700); + margin-bottom: var(--space-1); +} + +/* Inputs, textareas, selects */ +.form-control, +.form-select { + font-size: var(--font-size-base); + font-family: var(--font-family-base); + color: var(--color-gray-900); + background-color: var(--color-white); + border: 1px solid var(--color-gray-400); + border-radius: var(--radius-md); + padding: var(--space-2) var(--space-3); + transition: + border-color var(--transition-fast), + box-shadow var(--transition-fast); + line-height: var(--line-height-base); +} + +.form-control:hover, +.form-select:hover { + border-color: var(--color-primary-light); +} + +.form-control:focus, +.form-select:focus { + border-color: var(--color-primary); + box-shadow: 0 0 0 3px rgba(27,110,194,0.15); outline: none; } +.form-control::placeholder { + color: var(--color-gray-500); +} + +/* Textarea defaults */ +textarea.form-control { + min-height: 80px; + resize: vertical; +} + +/* Specific textarea height variants */ +textarea.form-control.instructions-input { + min-height: 64px; +} + +textarea.form-control.message-input { + min-height: 96px; +} + +/* Read-only / disabled */ +.form-control:disabled, +.form-control[readonly] { + background-color: var(--color-gray-100); + color: var(--color-gray-600); + cursor: not-allowed; +} + +/* Floating labels */ +.form-floating > .form-control-plaintext::placeholder, +.form-floating > .form-control::placeholder { + color: var(--bs-secondary-color); + text-align: end; +} + +.form-floating > .form-control-plaintext:focus::placeholder, +.form-floating > .form-control:focus::placeholder { + text-align: start; +} + +/* Validation states */ .valid.modified:not([type=checkbox]) { - outline: 1px solid #26b050; + outline: 1px solid var(--color-success); } .invalid { - outline: 1px solid #e50000; + outline: 1px solid var(--color-danger); } .validation-message { - color: #e50000; + color: var(--color-danger); + font-size: var(--font-size-sm); + margin-top: var(--space-1); +} + +/* Darker border checkbox */ +.darker-border-checkbox.form-check-input { + border-color: var(--color-gray-500); +} + + +/* ───────────────────────────────────────────────────────────────────────────── + 11. Buttons + ───────────────────────────────────────────────────────────────────────────── */ + +/* Override Bootstrap primary button with brand colour */ +.btn-primary { + color: var(--color-white); + background-color: var(--color-primary); + border-color: var(--color-primary-dark); + font-weight: var(--font-weight-medium); + border-radius: var(--radius-md); + transition: + background-color var(--transition-fast), + border-color var(--transition-fast), + box-shadow var(--transition-fast), + transform var(--transition-fast); +} + +.btn-primary:hover:not(:disabled) { + background-color: var(--color-primary-dark); + border-color: var(--color-primary-darker); + color: var(--color-white); + transform: translateY(-1px); + box-shadow: var(--shadow-md); +} + +.btn-primary:active { + transform: translateY(0); + box-shadow: none; +} + +.btn-primary:disabled { + opacity: 0.65; + cursor: not-allowed; +} + +/* Outline primary */ +.btn-outline-primary { + color: var(--color-primary); + border-color: var(--color-primary); + background-color: transparent; + font-weight: var(--font-weight-medium); + border-radius: var(--radius-md); + transition: + background-color var(--transition-fast), + color var(--transition-fast), + transform var(--transition-fast); +} + +.btn-outline-primary:hover:not(:disabled) { + background-color: var(--color-primary); + color: var(--color-white); + transform: translateY(-1px); +} + +/* Secondary / muted action */ +.btn-secondary { + background-color: var(--color-gray-600); + border-color: var(--color-gray-700); + color: var(--color-white); + font-weight: var(--font-weight-medium); + border-radius: var(--radius-md); +} + +.btn-secondary:hover:not(:disabled) { + background-color: var(--color-gray-700); + border-color: var(--color-gray-800); + color: var(--color-white); +} + +/* Danger / destructive */ +.btn-danger { + background-color: var(--color-danger); + border-color: #b02a37; + color: var(--color-white); + font-weight: var(--font-weight-medium); + border-radius: var(--radius-md); +} + +.btn-danger:hover:not(:disabled) { + background-color: #b02a37; + border-color: #8c2030; + color: var(--color-white); +} + +/* Success / confirm */ +.btn-success { + background-color: var(--color-success); + border-color: #146c43; + color: var(--color-white); + font-weight: var(--font-weight-medium); + border-radius: var(--radius-md); +} + +.btn-success:hover:not(:disabled) { + background-color: #146c43; + border-color: #0f5132; + color: var(--color-white); +} + +/* Purple / multimodal */ +.btn-purple { + background-color: var(--color-purple); + border-color: #5a32a3; + color: var(--color-white); + font-weight: var(--font-weight-medium); + border-radius: var(--radius-md); +} + +.btn-purple:hover:not(:disabled), +.btn-purple:focus { + background-color: #5a32a3; + border-color: #4a2990; + color: var(--color-white); +} + +/* Info / teal */ +.btn-info-teal { + background-color: var(--color-info); + border-color: #065f72; + color: var(--color-white); + font-weight: var(--font-weight-medium); + border-radius: var(--radius-md); +} + +.btn-info-teal:hover:not(:disabled) { + background-color: #065f72; + border-color: #044c5b; + color: var(--color-white); +} + +/* Prompting strategies / pink */ +.btn-prompting { + background-color: var(--color-cat-prompting); + border-color: #c72d7c; + color: var(--color-white); + font-weight: var(--font-weight-medium); + border-radius: var(--radius-md); +} + +.btn-prompting:hover:not(:disabled) { + background-color: #c72d7c; + border-color: #a3255f; + color: var(--color-white); +} + +.btn-prompting:disabled { + opacity: 0.65; + cursor: not-allowed; +} + +/* Stream / animated button state */ +.btn-stream-active { + position: relative; + overflow: hidden; +} + +.btn-stream-active::after { + content: ''; + position: absolute; + top: 0; left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); + animation: btn-shimmer 1.5s infinite; +} + +@keyframes btn-shimmer { + 0% { left: -100%; } + 100% { left: 100%; } +} + + +/* ───────────────────────────────────────────────────────────────────────────── + 12. Badges & Tags + ───────────────────────────────────────────────────────────────────────────── */ + +/* Base badge β€” extends Bootstrap .badge */ +.badge { + font-size: var(--font-size-xs); + font-weight: var(--font-weight-semibold); + letter-spacing: 0.02em; + border-radius: var(--radius-pill); +} + +/* Semantic colour badges */ +.badge-primary { background-color: var(--color-primary); color: var(--color-white); } +.badge-success { background-color: var(--color-success); color: var(--color-white); } +.badge-info { background-color: var(--color-info); color: var(--color-white); } +.badge-warning { background-color: var(--color-warning); color: var(--color-white); } +.badge-danger { background-color: var(--color-danger); color: var(--color-white); } +.badge-purple { background-color: var(--color-purple); color: var(--color-white); } +.badge-pink { background-color: var(--color-pink); color: var(--color-white); } + +/* Subtle / ghost badges */ +.badge-primary-subtle { background-color: var(--color-primary-subtle); color: var(--color-primary-dark); } +.badge-success-subtle { background-color: var(--color-success-subtle); color: #0a3622; } +.badge-info-subtle { background-color: var(--color-info-subtle); color: #055160; } +.badge-warning-subtle { background-color: var(--color-warning-subtle); color: #664d03; } +.badge-danger-subtle { background-color: var(--color-danger-subtle); color: #842029; } +.badge-purple-subtle { background-color: var(--color-purple-subtle); color: #432874; } + +/* Technology / tag pill */ +.tag { + display: inline-flex; + align-items: center; + font-size: var(--font-size-xs); + font-weight: var(--font-weight-medium); + padding: 0.2em 0.65em; + border-radius: var(--radius-pill); + border: 1px solid var(--color-border); + background-color: var(--color-gray-100); + color: var(--color-gray-700); + gap: var(--space-1); +} + + +/* ───────────────────────────────────────────────────────────────────────────── + 13. Code & Pre blocks + ───────────────────────────────────────────────────────────────────────────── */ + +code { + font-family: var(--font-family-mono); + font-size: 0.875em; + color: #c7254e; + background-color: #fdf5f7; + padding: 0.1em 0.35em; + border-radius: var(--radius-sm); +} + +.code-block { + font-family: var(--font-family-mono); + font-size: var(--font-size-sm); + background-color: var(--color-gray-900); + color: #f8f8f2; + padding: var(--space-4) var(--space-5); + border-radius: var(--radius-lg); + overflow-x: auto; + line-height: var(--line-height-relaxed); + box-shadow: var(--shadow-inset); + margin: var(--space-3) 0; +} + +.code-block code { + color: inherit; + background: none; + padding: 0; + font-size: inherit; +} + +/* Thread / JSON log β€” green-on-dark terminal style */ +.thread-log { + background-color: var(--color-gray-900); + color: #a8ff78; + font-family: var(--font-family-mono); + font-size: var(--font-size-xs); + border-radius: var(--radius-md); + padding: var(--space-3) var(--space-4); + overflow-x: auto; + max-width: 100%; + white-space: pre-wrap; + word-break: break-all; + line-height: 1.6; + margin: 0; +} + + +/* ───────────────────────────────────────────────────────────────────────────── + 14. Loading / Spinner + ───────────────────────────────────────────────────────────────────────────── */ + +/* Inline spinner augment */ +.spinner-sm { + width: 1rem; + height: 1rem; + border-width: 0.15em; +} + +/* Full-panel loading overlay */ +.loading-overlay { + position: absolute; + inset: 0; + background: rgba(255,255,255,0.75); + display: flex; + align-items: center; + justify-content: center; + z-index: 10; + border-radius: inherit; + backdrop-filter: blur(2px); +} + +/* Pulse animation for streaming indicator dots */ +@keyframes pulse-dot { + 0%, 80%, 100% { transform: scale(0); opacity: 0; } + 40% { transform: scale(1); opacity: 1; } +} + +.streaming-indicator { + display: inline-flex; + gap: 4px; + align-items: center; + margin-left: var(--space-2); +} + +.streaming-indicator span { + width: 6px; + height: 6px; + background-color: var(--color-primary); + border-radius: 50%; + animation: pulse-dot 1.2s infinite ease-in-out both; +} + +.streaming-indicator span:nth-child(1) { animation-delay: 0s; } +.streaming-indicator span:nth-child(2) { animation-delay: 0.16s; } +.streaming-indicator span:nth-child(3) { animation-delay: 0.32s; } + +/* Pending response placeholder */ +.response-pending { + color: var(--color-gray-500); + font-style: italic; +} + + +/* ───────────────────────────────────────────────────────────────────────────── + 15. Alert & Notification + ───────────────────────────────────────────────────────────────────────────── */ + +/* Base alert extends Bootstrap .alert */ +.alert { + border-radius: var(--radius-lg); + font-size: var(--font-size-sm); + line-height: var(--line-height-relaxed); + padding: var(--space-3) var(--space-4); + border: none; + border-left: 4px solid transparent; +} + +.alert-info { + background-color: var(--color-info-subtle); + border-left-color: var(--color-info); + color: #055160; +} + +.alert-success { + background-color: var(--color-success-subtle); + border-left-color: var(--color-success); + color: #0a3622; } +.alert-warning { + background-color: var(--color-warning-subtle); + border-left-color: var(--color-warning); + color: #664d03; +} + +.alert-danger { + background-color: var(--color-danger-subtle); + border-left-color: var(--color-danger); + color: #842029; +} + +/* Blazor error UI bar β€” fixed at bottom */ +#blazor-error-ui { + color-scheme: light only; + background: lightyellow; + bottom: 0; + box-shadow: 0 -1px 2px rgba(0,0,0,0.2); + box-sizing: border-box; + display: none; + left: 0; + padding: 0.6rem 1.25rem 0.7rem 1.25rem; + position: fixed; + width: 100%; + z-index: 1000; +} + +#blazor-error-ui .dismiss { + cursor: pointer; + position: absolute; + right: 0.75rem; + top: 0.5rem; +} + +/* Blazor error boundary block */ .blazor-error-boundary { - background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; + background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=") no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } - .blazor-error-boundary::after { - content: "An error has occurred." +.blazor-error-boundary::after { + content: "An error has occurred."; +} + + +/* ───────────────────────────────────────────────────────────────────────────── + 16. Chat Message Bubbles + (Multi-turn / conversational agent pages) + ───────────────────────────────────────────────────────────────────────────── */ + +.chat-container { + display: flex; + flex-direction: column; + gap: var(--space-3); + padding: var(--space-4); + max-height: 500px; + overflow-y: auto; + scroll-behavior: smooth; +} + +.chat-container::-webkit-scrollbar { width: 4px; } +.chat-container::-webkit-scrollbar-thumb { + background: var(--color-gray-300); + border-radius: var(--radius-pill); +} + +.chat-message { + display: flex; + flex-direction: column; + max-width: 80%; + gap: var(--space-1); +} + +.chat-message.chat-user { align-self: flex-end; align-items: flex-end; } +.chat-message.chat-assistant { align-self: flex-start; align-items: flex-start; } + +.chat-bubble { + padding: var(--space-2) var(--space-4); + border-radius: var(--radius-xl); + font-size: var(--font-size-base); + line-height: var(--line-height-relaxed); + box-shadow: var(--shadow-xs); + word-break: break-word; +} + +.chat-user .chat-bubble { + background-color: var(--color-primary); + color: var(--color-white); + border-bottom-right-radius: var(--radius-sm); +} + +.chat-assistant .chat-bubble { + background-color: var(--color-gray-100); + color: var(--color-gray-900); + border: 1px solid var(--color-border); + border-bottom-left-radius: var(--radius-sm); +} + +/* Typing indicator */ +.chat-typing .chat-bubble { + background-color: var(--color-gray-100); + border: 1px solid var(--color-border); + display: flex; + gap: 4px; + align-items: center; + padding: var(--space-3) var(--space-4); +} + +.chat-typing-dot { + width: 8px; + height: 8px; + background-color: var(--color-gray-500); + border-radius: 50%; + animation: pulse-dot 1.2s infinite ease-in-out both; +} + +.chat-typing-dot:nth-child(2) { animation-delay: 0.16s; } +.chat-typing-dot:nth-child(3) { animation-delay: 0.32s; } + +/* Role label above bubble */ +.chat-label { + font-size: var(--font-size-xs); + font-weight: var(--font-weight-semibold); + color: var(--color-gray-500); + text-transform: uppercase; + letter-spacing: 0.04em; + padding: 0 var(--space-2); +} + +/* Chat input row at bottom of chat UI */ +.chat-input-row { + display: flex; + gap: var(--space-2); + align-items: flex-end; + padding-top: var(--space-3); + border-top: 1px solid var(--color-border-subtle); +} + +.chat-input-row .form-control { + flex: 1; + resize: none; +} + + +/* ───────────────────────────────────────────────────────────────────────────── + 17. Responsive Utilities + ───────────────────────────────────────────────────────────────────────────── */ + +/* Agent page two-column layout helper */ +.agent-layout { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-4); +} + +@media (min-width: 768px) { + .agent-layout { + grid-template-columns: 1fr 1fr; } -.darker-border-checkbox.form-check-input { - border-color: #929292; + .agent-layout.layout-3-9 { + grid-template-columns: 3fr 9fr; + } + + .agent-layout.layout-4-8 { + grid-template-columns: 4fr 8fr; + } + + .agent-layout.layout-8-4 { + grid-template-columns: 8fr 4fr; + } } -.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { - color: var(--bs-secondary-color); - text-align: end; +/* Full-width column span inside an agent-layout grid */ +.col-full { grid-column: 1 / -1; } + +/* Horizontal scrollable wrapper */ +.overflow-x-auto { + overflow-x: auto; + -webkit-overflow-scrolling: touch; } -.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { - text-align: start; -} \ No newline at end of file +/* Max-width constraint helpers */ +.content-narrow { max-width: 600px; } +.content-medium { max-width: 800px; } +.content-wide { max-width: 1000px; } + +/* Responsive visibility */ +@media (max-width: 640.98px) { + .hide-mobile { display: none !important; } +} + +@media (min-width: 641px) { + .hide-desktop { display: none !important; } +} + + +/* ───────────────────────────────────────────────────────────────────────────── + 18. Blazor / Framework β€” Validation, Approval UI, Misc + ───────────────────────────────────────────────────────────────────────────── */ + +/* Function approval inline UI (Agent04 & similar) */ +.approval-prompt { + background-color: var(--color-warning-subtle); + border: 1px solid #ffc107; + border-left: 4px solid var(--color-warning); + border-radius: var(--radius-lg); + padding: var(--space-3) var(--space-4); + margin-bottom: var(--space-3); +} + +.approval-prompt .approval-title { + font-weight: var(--font-weight-semibold); + color: #664d03; + margin-bottom: var(--space-2); + font-size: var(--font-size-sm); +} + +.approval-prompt .approval-actions { + display: flex; + gap: var(--space-2); + flex-wrap: wrap; +} + +/* Tool call / function execution display */ +.tool-call-item { + display: flex; + align-items: flex-start; + gap: var(--space-2); + padding: var(--space-2) var(--space-3); + background-color: var(--color-gray-50); + border-radius: var(--radius-md); + border: 1px solid var(--color-border-subtle); + font-size: var(--font-size-sm); + font-family: var(--font-family-mono); + margin-bottom: var(--space-2); +} + +.tool-call-icon { + font-size: 1rem; + line-height: 1.4; + flex-shrink: 0; +} + +/* Structured output table (Agent05 & similar) */ +.structured-output-table { + width: 100%; + border-collapse: separate; + border-spacing: 0; + font-size: var(--font-size-sm); +} + +.structured-output-table th { + background-color: var(--color-gray-100); + font-weight: var(--font-weight-semibold); + color: var(--color-gray-700); + padding: var(--space-2) var(--space-3); + border-bottom: 2px solid var(--color-border); + text-align: left; +} + +.structured-output-table td { + padding: var(--space-2) var(--space-3); + border-bottom: 1px solid var(--color-border-subtle); + color: var(--color-gray-800); +} + +.structured-output-table tr:last-child td { + border-bottom: none; +} + +/* ── End of Central Design System ── */ diff --git a/0-Agents/AgentsWebUI/wwwroot/image.jpg b/0-Agents/AgentsWebUI/wwwroot/image.jpg new file mode 100644 index 0000000..dd5c79a Binary files /dev/null and b/0-Agents/AgentsWebUI/wwwroot/image.jpg differ diff --git a/plans/ui-design-system.md b/plans/ui-design-system.md new file mode 100644 index 0000000..fe3e914 --- /dev/null +++ b/plans/ui-design-system.md @@ -0,0 +1,640 @@ +# Agent Framework Samples β€” UI Design System + +> **Status:** Ready for implementation +> **Target file:** `0-Agents/AgentsWebUI/wwwroot/app.css` +> **Scope:** Replaces all per-page `.razor.css` files (except scoped layout files) with a single central stylesheet. + +--- + +## Table of Contents + +1. [Design Philosophy](#design-philosophy) +2. [CSS Custom Properties (Design Tokens)](#css-custom-properties-design-tokens) +3. [Component Classes Reference](#component-classes-reference) +4. [Page Structure Pattern β€” Agent Pages](#page-structure-pattern--agent-pages) +5. [Home Page Structure](#home-page-structure) +6. [Navigation Menu](#navigation-menu) +7. [Per-Category Theme System](#per-category-theme-system) +8. [Files to Update After CSS is Applied](#files-to-update-after-css-is-applied) + +--- + +## Design Philosophy + +The design system is built on three principles: + +1. **Microsoft Fluent-inspired**: The colour palette anchors on Microsoft's deep navy blue (`#052767`) and brand blue (`#1b6ec2`), with the sidebar using the existing purple-to-navy gradient. All six agent categories retain their distinct accent colours for visual navigation. + +2. **Bootstrap-compatible**: Every class either extends or overrides a Bootstrap 5 class. No CSS framework replacement is needed β€” Bootstrap continues to supply the grid, utilities, and resets. + +3. **Central single source of truth**: All visual decisions (colours, spacing, radii, shadows) are expressed as CSS custom properties on `:root`. Per-page `.razor.css` files can be deleted once pages are refactored to use these shared classes. + +--- + +## CSS Custom Properties (Design Tokens) + +All tokens are declared on `:root` in `app.css`. + +### Color Palette + +| Token | Value | Purpose | +|-------|-------|---------| +| `--color-primary` | `#1b6ec2` | Primary brand blue β€” buttons, links, focus ring | +| `--color-primary-dark` | `#1361ac` | Hover state for primary elements | +| `--color-primary-darker` | `#0e4d8a` | Active/pressed state | +| `--color-primary-light` | `#4a90d9` | Focus ring outer glow | +| `--color-primary-subtle` | `#e8f1fb` | Light blue tint for backgrounds | +| `--color-sidebar-start` | `#052767` | Top of sidebar gradient | +| `--color-sidebar-end` | `#3a0647` | Bottom of sidebar gradient | +| `--color-success` | `#198754` | Success state, Functions category | +| `--color-info` | `#087990` | Info state, Storage category | +| `--color-warning` | `#fd7e14` | Warning state, Advanced category | +| `--color-danger` | `#dc3545` | Error/danger state | +| `--color-purple` | `#6f42c1` | Multimodal category, purple buttons | +| `--color-pink` | `#e83e8c` | Prompting Strategies category | +| `--color-surface` | `#ffffff` | Card / panel backgrounds | +| `--color-surface-alt` | `#f8f9fa` | Page background, panel headers | +| `--color-border` | `#dee2e6` | Card borders, dividers | +| `--color-border-subtle` | `#e9ecef` | Inner dividers, row separators | + +### Neutral Scale + +| Token | Value | Usage | +|-------|-------|-------| +| `--color-gray-50` | `#f8f9fa` | Page background | +| `--color-gray-100` | `#f1f3f5` | Hovered list items | +| `--color-gray-200` | `#e9ecef` | Borders | +| `--color-gray-500` | `#adb5bd` | Placeholder text | +| `--color-gray-600` | `#6c757d` | Muted / secondary text | +| `--color-gray-700` | `#495057` | Label text | +| `--color-gray-800` | `#343a40` | Body text on light backgrounds | +| `--color-gray-900` | `#212529` | Headings | + +### Category Accent Colors + +| Token | Value | Category | +|-------|-------|----------| +| `--color-cat-basics` | `#0d6efd` | πŸš€ Basics | +| `--color-cat-functions` | `#198754` | πŸ”§ Functions & Tools | +| `--color-cat-storage` | `#087990` | πŸ’Ύ Storage & Persistence | +| `--color-cat-multimodal` | `#6f42c1` | 🌐 Multimodal & External | +| `--color-cat-advanced` | `#fd7e14` | ⚑ Advanced Features | +| `--color-cat-prompting` | `#e83e8c` | 🧠 Prompting Strategies | + +### Typography + +| Token | Value | Usage | +|-------|-------|-------| +| `--font-family-base` | `'Segoe UI', 'Helvetica Neue', Arial, sans-serif` | Body text | +| `--font-family-mono` | `'Cascadia Code', 'Consolas', 'Courier New', monospace` | Code blocks | +| `--font-size-xs` | `0.75rem` | Badges, small labels | +| `--font-size-sm` | `0.875rem` | Card text, log lines | +| `--font-size-base` | `1rem` | Body text | +| `--font-size-lg` | `1.125rem` | Hero lead text | +| `--font-size-xl` | `1.25rem` | Category titles | +| `--font-size-2xl` | `1.5rem` | Page h1 | +| `--font-size-4xl` | `2.25rem` | Hero h1 | + +### Spacing + +Spacing tokens follow a 4px baseline grid: + +| Token | Value | px | +|-------|-------|----| +| `--space-1` | `0.25rem` | 4px | +| `--space-2` | `0.5rem` | 8px | +| `--space-3` | `0.75rem` | 12px | +| `--space-4` | `1rem` | 16px | +| `--space-6` | `1.5rem` | 24px | +| `--space-8` | `2rem` | 32px | +| `--space-10` | `2.5rem` | 40px | +| `--space-12` | `3rem` | 48px | + +### Border Radius + +| Token | Value | Usage | +|-------|-------|-------| +| `--radius-sm` | `0.25rem` | Code spans | +| `--radius-md` | `0.375rem` | Buttons, inputs | +| `--radius-lg` | `0.5rem` | Cards, panels | +| `--radius-xl` | `0.75rem` | Chat bubbles | +| `--radius-2xl` | `1rem` | Hero banner | +| `--radius-pill` | `50rem` | Badges, tags | + +### Shadows + +| Token | Usage | +|-------|-------| +| `--shadow-xs` | Minimal elevation (inline badges) | +| `--shadow-sm` | Default card shadow | +| `--shadow-md` | Hovered button | +| `--shadow-lg` | Hovered agent card | +| `--shadow-xl` | Hero banner | +| `--shadow-inset` | Code block inner depth | + +### Transitions + +| Token | Value | Usage | +|-------|-------|-------| +| `--transition-fast` | `0.12s ease` | Button hover | +| `--transition-base` | `0.18s ease` | Card hover, agent-card lift | +| `--transition-slow` | `0.3s ease` | Panel animations | + +--- + +## Component Classes Reference + +### Panels (Agent page content areas) + +A **panel** is the primary container for each content zone on an agent page. It wraps a Bootstrap `.card` with semantic header colour coding. + +| Class | Use | Header color | +|-------|-----|-------------| +| `.panel` | Base wrapper | Light gray | +| `.panel-config` | Configuration inputs section | Light blue | +| `.panel-result` | AI response output | Light green | +| `.panel-log` | Function call / execution log | Light yellow | +| `.panel-thread` | Conversation thread / JSON dump | Light purple | +| `.panel-danger` | Error output | Light red | + +**HTML structure:** + +```html +
+
βš™οΈ Configuration
+
+ +
+
+``` + +Panel headers inherit Bootstrap `.card-header` and get overridden by the `.panel-*` modifier. The headers are styled with uppercased small text, a subtle background, and a border-bottom that matches the panel type colour. + +--- + +### Page Header + +Every agent page should have a consistent header block above the panels. + +```html +
+

Agent 01 - Basic Agent

+

+ Demonstrates basic AI agent setup allowing users to configure instructions and messages, + with Submit and Stream buttons for synchronous and real-time responses. +

+
+``` + +- `.page-title` β€” 1.5rem bold, line-height tight +- `.page-subtitle` β€” 1.0625rem muted gray, max-width 720px + +--- + +### Form Controls + +Use Bootstrap classes augmented by the design system overrides: + +```html +
+ + +
+
+ + +
+``` + +| Class modifier | Effect | +|----------------|--------| +| `.instructions-input` | 64px min-height | +| `.message-input` | 96px min-height | +| No modifier | 80px min-height (default `textarea.form-control`) | + +--- + +### Buttons + +| Class | When to use | +|-------|-------------| +| `.btn.btn-primary` | Primary action (Submit) | +| `.btn.btn-outline-primary` | Secondary action (Stream) | +| `.btn.btn-secondary` | Neutral / cancel | +| `.btn.btn-danger` | Destructive action / reject | +| `.btn.btn-success` | Approve / confirm | +| `.btn.btn-purple` | Multimodal / AI-visual action | +| `.btn.btn-info-teal` | Info / storage action | +| `.btn.btn-stream-active` | Add to Submit when streaming (shimmer animation) | + +Standard action row for agent pages: + +```html +
+ + +
+``` + +--- + +### Badges and Tags + +```html + +Basic + + +Active +Pending + + +πŸ”§ Function +πŸ“„ JSON +``` + +--- + +### Code and Pre Blocks + +Inline code: +```html +The agent returns a PersonInfo object. +``` + +Block code with dark background: +```html +
@threadLog
+``` + +Thread/JSON dump with green-on-dark terminal style: +```html +
@threadJson
+``` + +--- + +### Loading and Streaming + +Three-dot pulse indicator (inline): +```html +@if (isLoading) +{ + + + +} +``` + +Pending response placeholder text: +```html +

Waiting for response...

+``` + +--- + +### Alerts + +```html +
This sample requires an OPEN_ROUTER_API_KEY.
+
Function approval required.
+
Response received successfully.
+
An error occurred: @errorMessage
+``` + +--- + +### Chat Bubbles + +Used in conversational / multi-turn agent pages (e.g. Agent02, Agent06): + +```html +
+
+ You +
Hello, can you help me?
+
+
+ Agent +
Of course! What do you need?
+
+ @if (isLoading) + { +
+
+ + + +
+
+ } +
+
+ + +
+``` + +--- + +### Function Approval UI + +```html +
+
⚠️ Function call approval required
+

The agent wants to call: GetWeather("Seattle")

+
+ + +
+
+``` + +--- + +### Two-Column Agent Layout + +For pages that need a config panel on the left and results on the right: + +```html +
+
+
+
+``` + +Available grid variants: +- `.agent-layout` β€” equal columns on desktop, stacked on mobile +- `.agent-layout.layout-3-9` β€” narrow config, wide results +- `.agent-layout.layout-4-8` β€” standard config, wide results +- `.agent-layout.layout-8-4` β€” wide results, narrow metadata + +--- + +## Page Structure Pattern β€” Agent Pages + +Every Agent page should follow this HTML scaffold: + +```html +@page "/agentXX" +@inject IConfiguration Configuration + +Agent XX - Name + + +
+

Agent XX β€” Feature Name

+

+ One or two sentences describing what this sample demonstrates. +

+
+ + +
+ + +
+
+
βš™οΈ Configuration
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+ @if (!string.IsNullOrEmpty(response)) + { + +
+
πŸ’¬ Response
+
+
@((MarkupString)response)
+
+
+ } + + @if (!string.IsNullOrEmpty(log)) + { + +
+
πŸ“‹ Log
+
+
@((MarkupString)log)
+
+
+ } + + @if (!string.IsNullOrEmpty(threadLog)) + { + +
+
🧡 Thread
+
+ 
@threadLog
+
+
+ } +
+ +
+ +@code { + /* ... agent code ... */ +} +``` + +### Simple Single-Column Page (for basic agents) + +For agents with minimal output (Agent01, Agent02, Agent05): + +```html +
+

Agent 01 β€” Basic Agent

+

...

+
+ +
+
βš™οΈ Configuration
+
+ +
+
+ +@if (!string.IsNullOrEmpty(response)) +{ +
+
πŸ’¬ Response
+
+
@((MarkupString)response)
+
+
+} +``` + +--- + +## Home Page Structure + +The Home page structure uses these classes: + +```html + +
+
+ πŸ€– +

Microsoft Agent Framework Samples

+
+

...

+
+ .NET 10 + Blazor +
+
+ + +
+
+ πŸš€ +

Basics

+ 3 samples +
+
+
+
+
+
+
Basic Agent
+ Basic +
+

Description...

+
+
+ Explore Sample β†’ +
+
+
+
+
+``` + +The `.cat-basics`, `.cat-functions`, `.cat-storage`, `.cat-multimodal`, `.cat-advanced`, and `.cat-prompting` wrapper classes automatically apply the correct border, badge background, and button colour to all child elements. + +--- + +## Navigation Menu + +The navigation menu in `NavMenu.razor` uses these classes (already in place): + +| Class | Purpose | +|-------|---------| +| `.nav-category-header` | Uppercase section label | +| `.nav-divider` | `
` separator between groups | +| `.nav-icon` | Emoji icon wrapper with fixed width | +| `.nav-scrollable` | Scrollable nav container | +| `.navbar-brand` | App name in top left | + +Category header colours are set inline with `style="color: var(--color-cat-*)"` in the Razor file. This is acceptable since NavMenu.razor.css is a scoped file. + +--- + +## Per-Category Theme System + +The theme system uses a BEM-like modifier pattern: + +``` +.agent-category.cat-[name] + └── .category-header β†’ 2px bottom border in category colour + └── .cat-count-badge β†’ background in category colour + └── .agent-card β†’ 4px top border in category colour + └── .agent-badge β†’ background in category colour + └── .btn-cat β†’ filled button in category colour (optional) +``` + +No JavaScript is needed. The CSS cascade handles all theming through the parent wrapper class. + +--- + +## Files to Update After CSS is Applied + +Once `app.css` is complete, the following per-page CSS files can be **deleted**: + +| File | Can delete? | Reason | +|------|-------------|--------| +| `Home.razor.css` | βœ… Yes | All classes migrated to `app.css` | +| `NavMenu.razor.css` | ⚠️ Keep | Contains scoped `::deep` selectors for Blazor component isolation | +| `MainLayout.razor.css` | ⚠️ Keep | Contains scoped layout media queries | +| `ReconnectModal.razor.css` | ⚠️ Keep | Scoped modal overlay styles | + +Agent pages (`Agent01.razor` through `Agent23.razor`) do not have individual `.razor.css` files currently, so no files need deletion for those β€” only the inline `style=""` attributes and the basic Bootstrap class usage need updating per the page structure pattern above. + +### Inline styles to migrate + +Several pages use inline style attributes that should be replaced with classes: + +- `style="height:200px;"` on `