Feat/implement rag demo

.models

@@ -1,4 +1,6 @@
-gemma:2b
-llama3:8b
+gemma2:2b
+llama3.1:8b
+phi3:mini
+
+#Place any new model here and it will be downloaded during start command
 
-#Place any new model here and it will be downloaded during start command

Docs/Images/temp/example.json

@@ -0,0 +1,59 @@
+{
+    "id": "d2f191c7-f08b-4285-b0d6-bb99a045ebde",
+    "name": "agent_one",
+    "description": "This is the first RAG agent",
+    "model": "gemma:2b",
+    "context": 
+    {
+        "instruction": "You are shop assistant in a GeekITStuff store. You have to help the customer in finding the right product",
+        "source":
+        {
+            "type": "api", //can be api/sql/text/file as we know it now
+            "details": 
+            {
+                "url": "https://api.example.com/@filter@",
+                "method": "GET",
+                "query": "",
+                "payload": ""
+                //In future we will also have to add authentication details
+            }
+        },
+        "steps": ["ANSWER"],
+        //"steps": ["REDIRECT_ac243657-5ab1-4727-b4be-1ea5ae2e76d3", "FETCH_DATA_WITH_FILTER", "ANSWER", "REDIRECT_b29211e9-9ee8-45f4-bdbb-054cb835d0d6"],
+        "relations": //connections that this agent can make to other agents
+        [
+            {
+                "id": "ac243657-5ab1-4727-b4be-1ea5ae2e76d3",
+                "agentPurpose": "category detection",
+            },
+            {
+                "id": "b29211e9-9ee8-45f4-bdbb-054cb835d0d6",
+                "agentPurpose": "output prettifier",
+            }
+        ]
+    }
+}
+
+{
+    "id": "ac243657-5ab1-4727-b4be-1ea5ae2e76d3",
+    "name": "agent_two",
+    "description": "This is the second RAG agent",
+    "model": "gemma:2b",
+    "context": 
+    {
+        "instruction": "Identify correct category for question: Available are PC, LAPTOP, ACCESSORIES - Its important to respond with single word",
+        "steps": ["ANSWER"],
+    }
+}
+
+{
+    "id": "b29211e9-9ee8-45f4-bdbb-054cb835d0d6",
+    "name": "agent_three",
+    "description": "This is the third RAG agent",
+    "model": "gemma:2b",
+    "context": 
+    {
+        "instruction": "Your role is to prettify the response for the user to understand better",
+        "steps": ["ANSWER"],
+    }
+}

Docs/Images/temp/response.json

@@ -0,0 +1,13 @@
+{
+    "id": "a0353d9d-2dfb-4663-91a4-987a20c9aba1",
+    "name": "agent_one",
+    "model": "gemma:2b",
+    "messages": [
+      {
+        "role": "system",
+        "content": "You are shop assistant in a GeekITStuff store. You have to help the customer in finding the right product"
+      }
+    ],
+    "type": 2,
+    "stream": false
+  }

Docs/Images/temp/result.json

@@ -0,0 +1,28 @@
+{
+    "Id": "32d8d3f5-4cb5-4f9b-bb51-ab674ae212f5",
+    "Name": "agent_one",
+    "Model": "gemma:2b",
+    "Messages": [
+      {
+        "Role": "system",
+        "Content": "You are shop assistant in a GeekITStuff store. You have to help the customer in finding the right product"
+      },
+      {
+        "Role": "user",
+        "Content": "I am looking for something budget friendly but with options for extensions"
+      },
+      {
+        "Role": "system",
+        "Content": "Here is data from internal data source, This is what you should use to answer questions: [{\"id\":1,\"image\":\"pc1.jpg\",\"name\":\"Gaming PC Ultra\",\"brand\":\"PowerTech\",\"processor\":\"Intel Core i9-11900K\",\"type\":\"PC\",\"ram\":\"32GB DDR4\",\"storage\":\"1TB SSD + 2TB HDD\",\"gpu\":\"NVIDIA GeForce RTX 3090\",\"price\":2999.99,\"availability\":\"In Stock\",\"description\":\"The Gaming PC Ultra from PowerTech features an Intel Core i9 processor and NVIDIA RTX 3090, making it perfect for high-end gaming and demanding applications. With 32GB of RAM and ample storage, this PC can handle any task with ease.\"},{\"id\":2,\"image\":\"pc2.png\",\"name\":\"Workstation Pro\",\"brand\":\"TechMaster\",\"processor\":\"AMD Ryzen 9 5950X\",\"type\":\"PC\",\"ram\":\"64GB DDR4\",\"storage\":\"2TB SSD\",\"gpu\":\"NVIDIA Quadro RTX 5000\",\"price\":3499.99,\"availability\":\"In Stock\",\"description\":\"TechMaster's Workstation Pro is designed for professionals who require top-tier performance. With an AMD Ryzen 9 CPU, 64GB RAM, and NVIDIA Quadro RTX GPU, this workstation excels in 3D rendering, video editing, and other intensive tasks.\"},{\"id\":3,\"image\":\"pc3.jpg\",\"name\":\"Budget Gamer\",\"brand\":\"EconoPC\",\"processor\":\"Intel Core i5-10400F\",\"type\":\"PC\",\"ram\":\"16GB DDR4\",\"storage\":\"512GB SSD\",\"gpu\":\"NVIDIA GeForce GTX 1660 Super\",\"price\":799.99,\"availability\":\"Out of Stock\",\"description\":\"The Budget Gamer by EconoPC provides excellent value for entry-level gaming. Featuring an Intel Core i5 processor and NVIDIA GTX 1660 Super GPU, this PC delivers smooth performance for popular games at an affordable price.\"},{\"id\":4,\"image\":\"pc4.jpg\",\"name\":\"All-Purpose PC\",\"brand\":\"ValueComp\",\"processor\":\"AMD Ryzen 5 3600\",\"type\":\"PC\",\"ram\":\"16GB DDR4\",\"storage\":\"1TB HDD\",\"gpu\":\"AMD Radeon RX 5700\",\"price\":999.99,\"availability\":\"In Stock\",\"description\":\"ValueComp's All-Purpose PC is a versatile system suitable for gaming, work, and everyday use. It features an AMD Ryzen 5 processor, 16GB RAM, and a Radeon RX 5700 GPU, ensuring balanced performance for a variety of tasks.\"},{\"id\":5,\"image\":\"pc5.jpg\",\"name\":\"Compact Office PC\",\"brand\":\"OfficeMate\",\"processor\":\"Intel Core i3-10100\",\"type\":\"PC\",\"ram\":\"8GB DDR4\",\"storage\":\"256GB SSD\",\"gpu\":\"Integrated Graphics\",\"price\":499.99,\"availability\":\"In Stock\",\"description\":\"The Compact Office PC by OfficeMate is ideal for small spaces and routine office tasks. Equipped with an Intel Core i3 processor and 8GB of RAM, it offers reliable performance for word processing, spreadsheets, and internet browsing.\"},{\"id\":6,\"image\":\"pc6.jpg\",\"name\":\"Performance Beast\",\"brand\":\"ExtremeTech\",\"processor\":\"Intel Core i7-12700K\",\"type\":\"PC\",\"ram\":\"32GB DDR5\",\"storage\":\"2TB SSD\",\"gpu\":\"NVIDIA GeForce RTX 3080\",\"price\":2599.99,\"availability\":\"In Stock\",\"description\":\"ExtremeTech's Performance Beast is designed for the most demanding users. With an Intel Core i7 processor, 32GB DDR5 RAM, and NVIDIA RTX 3080 GPU, this PC is ideal for gaming, 3D rendering, and other high-performance applications.\"},{\"id\":7,\"image\":\"laptop1.jpg\",\"name\":\"UltraBook Pro\",\"brand\":\"PowerTech\",\"processor\":\"Intel Core i7-1165G7\",\"type\":\"Laptop\",\"ram\":\"16GB LPDDR4x\",\"storage\":\"512GB SSD\",\"gpu\":\"Intel Iris Xe Graphics\",\"price\":1299.99,\"availability\":\"In Stock\",\"description\":\"The UltraBook Pro by PowerTech offers a sleek design with powerful performance, featuring an Intel Core i7 processor and Intel Iris Xe Graphics. With 16GB of RAM and a 512GB SSD, this laptop is perfect for professionals on the go.\"},{\"id\":8,\"image\":\"laptop2.jpg\",\"name\":\"Gaming Laptop X\",\"brand\":\"TechMaster\",\"processor\":\"AMD Ryzen 7 5800H\",\"type\":\"Laptop\",\"ram\":\"32GB DDR4\",\"storage\":\"1TB SSD\",\"gpu\":\"NVIDIA GeForce RTX 3070\",\"price\":1999.99,\"availability\":\"In Stock\",\"description\":\"TechMaster's Gaming Laptop X is designed for gamers who need high performance on the go. Featuring an AMD Ryzen 7 CPU and NVIDIA RTX 3070 GPU, this laptop delivers smooth gaming experiences and fast load times.\"},{\"id\":9,\"image\":\"laptop3.jpg\",\"name\":\"Budget Laptop\",\"brand\":\"EconoPC\",\"processor\":\"Intel Core i3-1115G4\",\"type\":\"Laptop\",\"ram\":\"8GB DDR4\",\"storage\":\"256GB SSD\",\"gpu\":\"Integrated Graphics\",\"price\":499.99,\"availability\":\"Out of Stock\",\"description\":\"The Budget Laptop by EconoPC offers essential features at an affordable price. With an Intel Core i3 processor and 8GB of RAM, it's suitable for students and casual users who need reliable performance for everyday tasks.\"},{\"id\":10,\"image\":\"laptop4.jpg\",\"name\":\"All-Purpose Laptop\",\"brand\":\"ValueComp\",\"processor\":\"AMD Ryzen 5 4500U\",\"type\":\"Laptop\",\"ram\":\"16GB DDR4\",\"storage\":\"512GB SSD\",\"gpu\":\"AMD Radeon Graphics\",\"price\":899.99,\"availability\":\"In Stock\",\"description\":\"ValueComp's All-Purpose Laptop is versatile and powerful, equipped with an AMD Ryzen 5 processor and Radeon Graphics. It's ideal for a variety of tasks, including work, entertainment, and light gaming.\"},{\"id\":11,\"image\":\"laptop5.jpg\",\"name\":\"Compact Office Laptop\",\"brand\":\"OfficeMate\",\"processor\":\"Intel Core i5-1135G7\",\"type\":\"Laptop\",\"ram\":\"8GB LPDDR4x\",\"storage\":\"512GB SSD\",\"gpu\":\"Intel Iris Xe Graphics\",\"price\":799.99,\"availability\":\"In Stock\",\"description\":\"The Compact Office Laptop by OfficeMate is perfect for professionals who need a portable and efficient device. With an Intel Core i5 processor and 8GB of RAM, it offers solid performance for office applications and multitasking.\"},{\"id\":12,\"image\":\"laptop6.jpg\",\"name\":\"Creative Laptop\",\"brand\":\"CreativeTech\",\"processor\":\"Apple M1\",\"type\":\"Laptop\",\"ram\":\"16GB Unified Memory\",\"storage\":\"1TB SSD\",\"gpu\":\"Apple M1 GPU\",\"price\":1499.99,\"availability\":\"In Stock\",\"description\":\"CreativeTech's Creative Laptop is perfect for designers and content creators. Featuring the Apple M1 chip, 16GB of unified memory, and a 1TB SSD, this laptop offers exceptional performance and efficiency for creative tasks.\"}]"
+      },
+      {
+        "Role": "assistant",
+        "Content": "## Budget Gamer: Your Gateway to High-Performance Gaming on a Shoestring\n\nThe **Budget Gamer** from EconoPC is the PC that proves you can have the ultimate gaming experience without breaking the bank. It's packed with powerful features and sleek design, making it the perfect companion for both casual gamers and hardcore enthusiasts.\n\n**Here's what the Budget Gamer offers:**\n\n* **Unmatched value for its price:** This PC delivers high performance and exceptional features without the hefty price tag.\n* **Next-gen specs:** It boasts a brand-new Ryzen 7 5800U processor, 16GB of fast DDR5 memory, and a NVIDIA GeForce RTX 3060 graphics card – enough to run most popular games at high settings and even some demanding titles in 1080p.\n* **Ultra-quiet operation:** Enjoy a peaceful gaming environment with the built-in fans that ensure minimal noise.\n* **Sleek and stylish design:** The Budget Gamer boasts an elegant chassis and a unique mesh front panel, giving it a modern touch.\n* **Warranty and support:** EconoPC offers a comprehensive warranty and dedicated support resources, ensuring you have everything you need for complete peace of mind.\n\n**The Budget Gamer is perfect for:**\n\n* Gamers on a tight budget who still want to enjoy high-quality gaming.\n* First-time PC builders who want a powerful system without breaking the bank.\n* Gamers who demand high performance and a quiet and comfortable gaming environment.\n\n**Don't miss out on the ultimate gaming experience – get your Budget Gamer today!**"
+      }
+    ],
+    "Type": 2,
+    "Stream": false,
+    "Properties": {
+      "FETCH_DATA*": ""
+    }
+  }

Docs/Images/temp/test.json

@@ -0,0 +1,40 @@
+[
+    {
+    "id": "d2f191c7-f08b-4285-b0d6-bb99a045ebde",
+    "name": "agent_one",
+    "description": "This is the first RAG agent",
+    "model": "llama3.1:8b",
+    "context": 
+    {
+        "instruction": "You are shop assistant in a GeekITStuff store. You have to help the customer in finding the right product",
+        "source":
+        {
+            "type": 1, 
+            "details": 
+            {
+                "url": "http://localhost:5098/items",
+                "method": "Get",
+                "query": "",
+                "payload": ""
+            }
+        },
+        "steps": ["FETCH_DATA*","ANSWER", "REDIRECT+b29211e9-9ee8-45f4-bdbb-054cb835d0d6+AS_Output+REPLACE"],
+        "relations":
+        [
+            "ac243657-5ab1-4727-b4be-1ea5ae2e76d3",
+            "b29211e9-9ee8-45f4-bdbb-054cb835d0d6"
+        ]
+    }
+},
+{
+    "id": "b29211e9-9ee8-45f4-bdbb-054cb835d0d6",
+    "name": "agent_three",
+    "description": "This is the third RAG agent",
+    "model": "llama3.1:8b",
+    "context": 
+    {
+        "instruction": "Adjust previous response to be better for marketting purposes. Dont include any introduction, just pure content",
+        "steps": ["ANSWER"]
+    }
+}
+]

Frontend/MainFE/Components/Elements/ChatComponent.razor

@@ -0,0 +1,114 @@
+@using MainFE.Components.Models
+@using Markdig
+@using Microsoft.FluentUI.AspNetCore.Components
+@using Message = MainFE.Components.Models.Message
+@inject HttpClient Http
+<link rel="stylesheet" href="css/chat.css">
+
+<div class="messages-container">
+    @foreach (var message in Chat?.Messages ?? [])
+    {
+        @if (message.Role != Role.System.ToString().ToLowerInvariant())
+        {
+            <span class="@(message.Role == Role.User.ToString() ? "message-role-user" : "message-role-bot")">@GetRoleLabel(message.Role)</span>
+            <FluentCard class="@(message.Role == Role.User.ToString() ? "message-card user-message" : "message-card bot-message")">
+                @((MarkupString)((message.Role == Role.User.ToString()
+                    ? message.Content
+                    : Markdown.ToHtml((string)message.Content!,
+                        new MarkdownPipelineBuilder()
+                            .UseAdvancedExtensions()
+                            .Build())) ?? string.Empty))
+            </FluentCard>
+        }
+    }
+    @if (IsLoading)
+    {
+        <span class="message-role-bot">@_displayName</span>
+        <FluentProgressRing Visible="IsLoading"></FluentProgressRing>
+    }
+</div>
+<div class="input-container">
+    <input @bind-value="_ask" @bind-value:event="oninput" placeholder="Enter your prompt here..." @onkeydown="CheckEnterKey" class="inp">
+    <FluentButton IconStart="@(new Icons.Filled.Size28.Send())" BackgroundColor="rgba(0, 0, 0, 0)" Style="margin-top: 5px; background-color: transparent"
+                  Appearance="Appearance.Lightweight"
+                  Loading="@IsLoading"
+                  OnClick="@(() => SendAsync(_ask))">
+    </FluentButton>
+</div>
+<FluentProgress Visible="@(IsLoading)" style="width: 100%;"></FluentProgress>
+
+@code
+{
+    [Parameter] public ChatDto? Chat { get; set; }
+    [Parameter] public string SelectedModel { get; set; }
+    [Parameter] public bool IsLoading { get; set; }
+    [Parameter] public string? CustomName { get; set; }
+    [Parameter] public bool IsRagChat { get; set; }
+    [Parameter] public string? AgentId { get; set; }
+    [Parameter] public bool Translate { get; set; }
+
+    private string _ask = string.Empty;
+    private string _displayName => CustomName ?? SelectedModel;
+
+    private async Task SendAsync(string message)
+    {
+        if (IsRagChat)
+        {
+            await RaGSendAsync(message);
+            return;
+        }
+
+        IsLoading = true;
+        if (!string.IsNullOrWhiteSpace(message))
+        {
+            Chat.Messages.Add(new Message { Role = Role.User.ToString(), Content = message });
+            Chat.Model = SelectedModel;
+
+            var apiResponse = await Http.PostAsJsonAsync($"{ExtensionMethods.GetApiUrl()}/api/chats/complete?translate={Translate}", Chat);
+
+            if (apiResponse.IsSuccessStatusCode)
+            {
+                var response = await apiResponse.Content.ReadFromJsonAsync<ChatResponse>();
+                if (response != null)
+                {
+                    Chat.Messages.Add(response.Message);
+                }
+            }
+            IsLoading = false;
+            _ask = string.Empty;
+        }
+    }
+
+    private async Task RaGSendAsync(string message)
+    {
+        IsLoading = true;
+        if (!string.IsNullOrWhiteSpace(message))
+        {
+            Chat.Messages.Add(new Message { Role = Role.User.ToString(), Content = message });
+            Chat.Model = SelectedModel;
+
+            var apiResponse = await Http.PostAsJsonAsync($"{ExtensionMethods.GetApiUrl()}/api/agents/{AgentId}/process", Chat);
+
+            if (apiResponse.IsSuccessStatusCode)
+            {
+                var response = await apiResponse.Content.ReadFromJsonAsync<ChatDto>();
+                if (response != null)
+                {
+                    Chat = response;
+                }
+            }
+            IsLoading = false;
+            _ask = string.Empty;
+        }
+    }
+
+    private async Task CheckEnterKey(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter")
+        {
+            await SendAsync(_ask);
+        }
+    }
+
+    private string GetRoleLabel(string role) => role == Role.User.ToString() ? "( ͡° ͜ʖ ͡°) User" : $"{_displayName}";
+}

Frontend/MainFE/Components/Elements/TileSelect.razor

@@ -0,0 +1,51 @@
+@typeparam TItem
+
+<div class="tile-select">
+    @foreach (var item in Items)
+    {
+        <div class="tile @(EqualityComparer<TItem>.Default.Equals(item, SelectedItem) ? "selected" : "")"
+             @onclick="() => SelectItem(item)">
+            @item
+        </div>
+    }
+</div>
+
+@code {
+    [Parameter] public List<TItem> Items { get; set; }
+    [Parameter] public TItem SelectedItem { get; set; }
+    [Parameter] public EventCallback<TItem> SelectedItemChanged { get; set; }
+
+    private void SelectItem(TItem item)
+    {
+        SelectedItem = item;
+        SelectedItemChanged.InvokeAsync(item);
+    }
+}
+
+<style>
+    .tile-select {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+
+    .tile {
+        padding: 10px;
+        border: 1px solid #2b2a2a;
+        border-radius: 8px;
+        color: wheat;
+        width: 100%;
+        cursor: pointer;
+        transition: background-color 0.3s;
+    }
+
+    .tile:hover {
+        background-color: #494949;
+    }
+
+    .tile.selected {
+        background-color: #8c8282;
+        color: white;
+        border-color: #ffffff;
+    }
+</style>