|
6 | 6 |
|
7 | 7 | @(Html.Kendo().Grid<SaleRecord>() |
8 | 8 | .Name("salesGrid") |
| 9 | + .ToolBar(t => |
| 10 | + { |
| 11 | + t.AIAssistant(); |
| 12 | + t.Spacer(); |
| 13 | + t.Custom().Name("resetChanges") |
| 14 | + .Text("Reset changes") |
| 15 | + .IconClass("k-icon k-i-arrow-rotate-ccw"); |
| 16 | + }) |
9 | 17 | .Columns(columns => |
10 | 18 | { |
11 | 19 | columns.Bound(c => c.Id).Width(80); |
|
17 | 25 | }) |
18 | 26 | .Scrollable(s => s.Height("300px")) |
19 | 27 | .DataSource(ds => ds.Ajax() |
| 28 | + .Model(m => m.Id(x => x.Id)) |
20 | 29 | .Read(read => read.Url("/SmartGrid/GetSales")) |
21 | 30 | ) |
| 31 | + .AI(ai => ai |
| 32 | + .Service("/SmartGrid/Analyze") |
| 33 | + .AIAssistant(aiAsst => aiAsst |
| 34 | + .PromptSuggestions(new[] |
| 35 | + { |
| 36 | + "Sort the grid by Total descending.", |
| 37 | + "Filter to only show data from July.", |
| 38 | + "Show only rows where Units Sold is greater than 130.", |
| 39 | + }) |
| 40 | + .PromptTextArea(p => p.Rows(2).Resize(TextAreaResize.Auto).MaxRows(5)) |
| 41 | + ) |
| 42 | + .AIAssistantWindow(ws => ws.Width(558).Actions(a => a.Minimize().Close())) |
| 43 | + ) |
22 | 44 | .Sortable() |
23 | 45 | .Filterable() |
24 | 46 | ) |
25 | | - |
26 | | -<div class="k-mt-4" style="color: #ffffff;"> |
27 | | - <label for="instructionBox" class="k-label">Ask AI about the data:</label> |
28 | | - |
29 | | - <ul style="margin-top: 5px; list-style: disc; padding-left: 20px; font-size: 14px; color: #00ffe5;"> |
30 | | - <li class="ai-suggestion">Which salesperson has the highest total sales?</li> |
31 | | - <li class="ai-suggestion">What is the average units sold per region?</li> |
32 | | - <li class="ai-suggestion">Show the month with the lowest performance.</li> |
33 | | - <li class="ai-suggestion">Sort the grid by Total descending</li> |
34 | | - <li class="ai-suggestion">Filter to only show data from July</li> |
35 | | - <li class="ai-suggestion">Show only rows where Units Sold is greater than 130</li> |
36 | | - <li class="ai-suggestion">What is the total revenue by month?</li> |
37 | | - <li class="ai-suggestion">How many units did Alice sell in total?</li> |
38 | | - </ul> |
39 | | - |
40 | | - |
41 | | - @(Html.Kendo().TextArea() |
42 | | - .Name("instructionBox") |
43 | | - .Placeholder("e.g. Which region had the lowest total?") |
44 | | - .Rows(4) |
45 | | - .HtmlAttributes(new { style = "width:100%; background-color:#1f1f1f; color:white;", @class = "k-textbox" }) |
46 | | - ) |
47 | | - |
48 | | - <div class="k-mt-2"> |
49 | | - @(Html.Kendo().Button() |
50 | | - .Name("analyzeButton") |
51 | | - .Content("Analyze") |
52 | | - .ThemeColor(ThemeColor.Success) |
53 | | - .HtmlAttributes(new { onclick = "analyzeGrid()" }) |
54 | | - ) |
55 | | - </div> |
56 | | -</div> |
57 | | - |
58 | | -<div id="aiResponse" class="k-mt-4"> |
59 | | - <strong>AI Response:</strong> |
60 | | - <div id="aiText" style="margin-top:10px;"></div> |
61 | | -</div> |
62 | | - |
63 | | -@section scripts { |
64 | | - <script> |
65 | | - $(document).on("click", ".ai-suggestion", function () { |
66 | | - const text = $(this).text().trim(); |
67 | | - $("#instructionBox").data("kendoTextArea").value(text); |
68 | | - }); |
69 | | -
|
70 | | -
|
71 | | - async function analyzeGrid() { |
72 | | - const grid = $("#salesGrid").data("kendoGrid"); |
73 | | - const allData = grid.dataSource.view().map(item => item.toJSON()); |
74 | | - const instructions = $("#instructionBox").val(); |
75 | | -
|
76 | | - if (!instructions.trim()) { |
77 | | - alert("Please enter a question or instruction for the AI."); |
78 | | - return; |
79 | | - } |
80 | | -
|
81 | | - $("#aiText").html("<em>Thinking...</em>"); |
82 | | -
|
83 | | - const response = await fetch('/SmartGrid/Analyze', { |
84 | | - method: 'POST', |
85 | | - headers: { 'Content-Type': 'application/json' }, |
86 | | - body: JSON.stringify({ |
87 | | - instructions: instructions, |
88 | | - gridJson: JSON.stringify(allData) |
89 | | - }) |
90 | | - }); |
91 | | -
|
92 | | - const result = await response.json(); |
93 | | -
|
94 | | - try { |
95 | | - const json = JSON.parse(result.result); |
96 | | -
|
97 | | - if (json.action === "filter") { |
98 | | - grid.dataSource.filter({ |
99 | | - field: json.field, |
100 | | - operator: json.operator, |
101 | | - value: json.value |
102 | | - }); |
103 | | - $("#aiText").html(`<strong>Applied filter:</strong> ${json.field} ${json.operator} ${json.value}`); |
104 | | - } else if (json.action === "sort") { |
105 | | - grid.dataSource.sort({ |
106 | | - field: json.field, |
107 | | - dir: json.dir |
108 | | - }); |
109 | | - $("#aiText").html(`<strong>Sorted by:</strong> ${json.field} (${json.dir})`); |
110 | | - } else { |
111 | | - $("#aiText").text(result.result); |
112 | | - } |
113 | | - } catch { |
114 | | - $("#aiText").text(result.result); |
115 | | - } |
116 | | - } |
117 | | - </script> |
118 | | -} |
119 | | - |
120 | | -<style> |
121 | | - textarea.k-textbox, |
122 | | - .k-input { |
123 | | - background-color: #1f1f1f; |
124 | | - color: #ffffff; |
125 | | - border-color: #444; |
126 | | - } |
127 | | -
|
128 | | - textarea.k-textbox::placeholder { |
129 | | - color: #888888; |
130 | | - } |
131 | | -
|
132 | | - #aiResponse { |
133 | | - background-color: #1f1f1f; |
134 | | - border: 1px solid #444; |
135 | | - padding: 1em; |
136 | | - border-radius: 6px; |
137 | | - margin-top: 1em; |
138 | | - color: #00ffe5; |
139 | | - font-size: 14px; |
140 | | - } |
141 | | -
|
142 | | - #aiResponse strong { |
143 | | - display: block; |
144 | | - margin-bottom: 6px; |
145 | | - color: #ffffff; |
146 | | - font-weight: 600; |
147 | | - font-size: 15px; |
148 | | - } |
149 | | -
|
150 | | - #aiText { |
151 | | - white-space: pre-line; |
152 | | - } |
153 | | -</style> |
0 commit comments