Redmind commited on
Commit
8d099ce
·
verified ·
1 Parent(s): 90f4574

Update templates/prompt_template.html

Browse files
Files changed (1) hide show
  1. templates/prompt_template.html +626 -458
templates/prompt_template.html CHANGED
@@ -1,459 +1,627 @@
1
- <!DOCTYPE html>
2
- <html>
3
-
4
- <head>
5
- <title>Prompt Template</title>
6
- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
7
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
8
- <!-- Include AdminLTE CSS -->
9
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/adminlte.min.css">
10
- <!-- Include DataTables CSS -->
11
- <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
12
- <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
13
- <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
14
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
15
- <style>
16
- .header-row {
17
- display: flex;
18
- justify-content: space-between;
19
- align-items: center;
20
- }
21
- .card {
22
- padding: 0;
23
- margin-top: -15px;
24
- margin-left: -40px;
25
- }
26
- .table-container {
27
- width: 100%;
28
- overflow-x: auto;
29
-
30
- }
31
-
32
- .wrapper {
33
- display: flex;
34
- flex-direction: column;
35
- height: 100vh;
36
- }
37
-
38
- .content-wrapper {
39
- flex: 1;
40
- overflow-y: auto;
41
- }
42
-
43
- .content-header {
44
- padding: 5px;
45
-
46
- }
47
-
48
- div.dataTables_wrapper div.dataTables_length select{
49
- width: 60px;
50
- display: inline-block;
51
- }
52
-
53
- th,
54
- td {
55
- white-space: nowrap;
56
- }
57
-
58
- th:nth-child(1),
59
- td:nth-child(1) {
60
- /* Sno column */
61
- width: 1%;
62
- }
63
-
64
- th:nth-child(2),
65
- td:nth-child(2) {
66
- /* API Name column */
67
- width: 20%;
68
- }
69
-
70
- th:nth-child(3),
71
- td:nth-child(3) {
72
- /* API Endpoint column */
73
- width: 45%;
74
- }
75
-
76
- th:nth-child(4),
77
- td:nth-child(4) {
78
- /* view column*/
79
- width: 5%;
80
- }
81
- th:nth-child(5),
82
- td:nth-child(5) {
83
- /* view column*/
84
- width: 5%;
85
- }
86
- th:nth-child(6),
87
- td:nth-child(6) {
88
- /* view column*/
89
- width: 5%;
90
- }
91
-
92
- .reduced-width {
93
- width: 25%;
94
- }
95
-
96
- .viewButton {
97
- size: 2px;
98
- }
99
- div.dataTables_wrapper div.dataTables_length select{
100
- width: 60px;
101
- display: inline-block;
102
- }
103
- </style>
104
- </head>
105
-
106
- <body>
107
- {% include 'sidepane.html' %}
108
-
109
- <div class="wrapper">
110
- <div class="main-header" style="border-bottom: none;">
111
- <!-- Content Header (Page header) -->
112
- <div class="content-header">
113
- <div class="container-fluid">
114
- <div class="container mt-2">
115
- <div class="form-group left-align">
116
- <label for="company" class="mr-1" style="margin-left:-60px;margin-top:-11px;">Company Name <span class="text-danger">*</span></label>
117
- <select type="text" id="company" name="company" class="form-control "style="width: 20%;margin-left:-60px;" required>
118
- <option value="" selected>Select</option>
119
- </select>
120
- <div class="col-12 d-flex justify-content-end mb-2">
121
- <button class="btn btn-primary" style="margin-top:-40px;margin-right: -25px;position: fixed;" id="add">Add</button>
122
-
123
- <!-- <button class="btn btn-primary" style="margin-top: 20px;" id="add">Add</button> -->
124
- </div>
125
- </div>
126
- <div class="row">
127
- <div id="message-container" style="margin-left: 150px;width:auto;"></div>
128
- </div>
129
- </div>
130
- </div>
131
- </div>
132
- <section class="content" id="contentSection" style="display: none;">
133
- <div class="container-fluid">
134
- <div class="form-group">
135
- <!-- <label for="company_id">company_id</label>--->
136
- <input type="hidden" id="company_id" name="company_id" class="form-control" required>
137
- </div>
138
- </div>
139
- <!-- Main content-->
140
- <section class="content">
141
- <div class="container-fluid">
142
- <div class="row">
143
- <div class="col-12">
144
- <div class="card">
145
- <div class="card-body table-container">
146
- <table id="promptTable" class="table table-bordered table-striped">
147
- <thead>
148
- <tr>
149
- <th>Sno</th>
150
- <th>Datasource</th>
151
- <th>Sample Prompt</th>
152
- <th>View</th>
153
- <th>Edit</th>
154
- <th>Delete</th>
155
- </tr>
156
- </thead>
157
- <tbody>
158
- <!-- <tr>
159
- <td>1</td>
160
- <td>API</td>
161
- <td>What are the details of ASN24080200002?</td>
162
- <td><button class="btn btn-primary viewButton">View</button></td>
163
- </tr>
164
- <tr>
165
- <td>2</td>
166
- <td>API</td>
167
- <td>What is the expected receiving date of ASN24080200002</td>
168
- <td><button class="btn btn-primary viewButton">View</button></td>
169
- </tr>
170
- <tr>
171
- <td>3</td>
172
- <td>Document</td>
173
- <td>Explain Pre-Receiving Yard Management</td>
174
- <td><button class="btn btn-primary viewButton">View</button></td>
175
- </tr>
176
- <tr>
177
- <td>4</td>
178
- <td>Document</td>
179
- <td>Can you explain the process of unloading a vehicle in more detail?</td>
180
- <td><button class="btn btn-primary viewButton">View</button></td>
181
- </tr>
182
- <tr>
183
- <td>5</td>
184
- <td>Visual Analysis</td>
185
- <td>I want to analyze item name and quantity in a bar chart in warehouse Allcargo Logistics</td>
186
- <td><button class="btn btn-primary viewButton">View</button></td>
187
- </tr>
188
- <tr>
189
- <td>6</td>
190
- <td>Visual Analysis</td>
191
- <td>Can you generate a pie chart with item names and quantities in warehouse Allcargo Logistics</td>
192
- <td><button class="btn btn-primary viewButton">View</button></td>
193
- </tr>
194
- <tr>
195
- <td>7</td>
196
- <td>Database</td>
197
- <td>What are the active warehouses available</td>
198
- <td><button class="btn btn-primary viewButton">View</button></td>
199
- </tr>
200
- <tr>
201
- <td>8</td>
202
- <td>Database</td>
203
- <td>What are the warehouses available</td>
204
- <td><button class="btn btn-primary viewButton">View</button></td>
205
- </tr>
206
- -->
207
- </tbody>
208
- </table>
209
- </div>
210
- </div>
211
- </div>
212
- </div>
213
- </div>
214
- </section>
215
- </section>
216
- </div>
217
-
218
- </div>
219
-
220
-
221
-
222
- <!-- Modal -->
223
- <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel"
224
- aria-hidden="true">
225
- <div class="modal-dialog" role="document">
226
- <div class="modal-content">
227
- <div class="modal-header">
228
- <h5 class="modal-title" id="addModalLabel">Add Prompt</h5>
229
- <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
230
- <span aria-hidden="true" data-backdrop="static" data-keyboard="false">&times;</span>
231
- </div>
232
- <div class="modal-body">
233
- <div class="form-group">
234
- <!-- <label for="company_id">company_id</label>--->
235
- <input type="hidden" id="company_id" name="company_id" class="form-control" required>
236
- </div>
237
- <form id="addPromptForm">
238
- <div class="form-group">
239
- <label for="scenario">Scenario <span class="text-danger">*</span></label>
240
- <input type="text" class="form-control" id="scenario" name="scenario" required>
241
- </div>
242
- <div class="form-group">
243
- <label for="prompt">Sample Prompt <span class="text-danger">*</span></label>
244
- <input type="text" class="form-control" id="prompt" name="sampleprompt" required>
245
- </div>
246
- <div class="form-group">
247
- <label for="comments">Comments <span class="text-danger">*</span></label>
248
- <input type="text" class="form-control" id="comments" name="comments" required>
249
- </div>
250
- </form>
251
- </div>
252
- <div class="modal-footer">
253
- <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> -->
254
- <button type="button" id="save" onclick="save_file()" class="btn btn-primary">Save</button>
255
- </div>
256
- </div>
257
- </div>
258
- </div>
259
-
260
- {%include 'footer.html'%}
261
- <!-- Include DataTables JS and your custom script -->
262
- <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
263
- <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
264
- <script>
265
- $(document).ready(function () {
266
- $('#add').on('click', function () {
267
- clearFormFields();
268
- $('#message-container').empty(); // Clear the message container
269
- $('#addModal').modal('show');
270
- });
271
- $('.modal-footer .btn-secondary, .modal-header .close').on('click', function () {
272
- $('#addModal').modal('hide');
273
- });
274
-
275
- });
276
- document.addEventListener("DOMContentLoaded", function () {
277
-
278
- // clearFormFields();
279
- fetchCompanies();
280
-
281
- const companySelect = document.getElementById('company');
282
- const addPromptForm = document.getElementById('addPromptForm');
283
- const table = $('#promptTable').DataTable();
284
- // Initialize DataTable at the start
285
- companySelect.addEventListener('change', async function () {
286
- $("#message-container").empty();
287
- const selectedCompanyName = companySelect.options[companySelect.selectedIndex].text;
288
- console.log(`Selected Company Name: ${selectedCompanyName}`);
289
-
290
- if (selectedCompanyName !== "Select") {
291
-
292
- try {
293
- const response = await fetch(`/api/company_id?company_name=${encodeURIComponent(selectedCompanyName)}`);
294
- if (!response.ok) {
295
- contentSection.style.display = 'none';
296
- ("company id does not exist for name does not exist. Please fill in the details.");
297
- const messageContainer = document.getElementById('message-container');
298
- if (messageContainer) {
299
- messageContainer.innerHTML = "<div class='alert alert-danger'>Document details do not exist for this company. Please fill in the details.</div>";
300
- }
301
- throw new Error('Network response was not ok');
302
- }
303
- const data = await response.json();
304
- console.log('data returned', data);
305
- console.log(`Company ID: ${data.company_id}`);
306
- const companyId = data.company_id;
307
- document.getElementById('company_id').value = companyId;
308
-
309
- if (companyId) {
310
- try {
311
- const Response = await fetch(`/api/get_prompt_templates?company_id=${companyId}&company_name=${selectedCompanyName}`);
312
- const connectorsResponse = await Response.json();
313
- console.log("prompt template data table after connecting to table", connectorsResponse);
314
- table.clear();
315
- if (!Array.isArray(connectorsResponse)) {
316
- throw new TypeError('Expected an array of companies');
317
-
318
- displayErrorMessage("template details do not exist for this company. Please fill in the details.");
319
- contentSection.style.display = 'none';
320
- } else {
321
-
322
- connectorsResponse.forEach((company, index) => {
323
- table.row.add([
324
- index + 1,
325
- company.scenario,
326
- company.prompt,
327
- "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye' fa-eye'></i></a>",
328
- "<a href='#' class='btn btn-warning btn-sm'><i class='fas fa-edit'></i></a>",
329
- "<a href='#' class='btn btn-danger btn-sm'><i class='fas fa-trash'></i></button>"
330
- ]).draw(false);
331
- });
332
- contentSection.style.display = 'block';
333
- }
334
-
335
- } catch (error) {
336
- console.error('Error fetching company documents:', error);
337
- //displayEmptyTable();
338
-
339
- displayErrorMessage("Prompt template do not exist for this company. Please fill in the details by clicking add button.");
340
- contentSection.style.display = 'none';
341
- }
342
- }
343
- else {
344
- // displayEmptyTable();
345
-
346
- displayErrorMessage("Company id do not exist for this company. Please fill in the details by clicking add button.");
347
- }
348
- } catch (error) {
349
- console.error('No details for this company ID or data documents:', error);
350
- // displayEmptyTable();
351
-
352
- displayErrorMessage("Document details3 do not exist for this company. Please fill in the details.");
353
- contentSection.style.display = 'none';
354
- }
355
- } else {
356
-
357
- table.clear().draw();
358
- document.getElementById('contentSection').style.display = 'none';
359
- // Optionally, you might want to clear the form fields as well
360
- clearFormFields();
361
-
362
- }
363
- });
364
- function displayErrorMessage(message) {
365
- const messageContainer = document.getElementById('message-container');
366
- if (messageContainer) {
367
- messageContainer.innerHTML = `<div class='alert alert-danger'>${message}</div>`;
368
- }
369
- }
370
-
371
- });
372
- function save_file() {
373
- const form = document.getElementById('addPromptForm');
374
-
375
- // Check if the form is valid
376
- if (!form.checkValidity()) {
377
- // If the form is invalid, show validation messages and stop the submission
378
- form.reportValidity();
379
- return;
380
- }
381
- const company_id = $('#company_id').val();
382
- const scenario = $('#scenario').val();
383
- const prompt = $('#prompt').val();
384
- const comments = $('#comments').val();
385
- const view = "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye'></i></a>";
386
- const edit = "<a href='#' class='btn btn-warning btn-sm'><i class='fas fa-edit'></i></a>";
387
- const dele = "<a href='#' class='btn btn-danger btn-sm'><i class='fas fa-trash'></i></a>";
388
-
389
- var formData = new FormData($('#addPromptForm')[0]);
390
-
391
- formData.append("company_id", company_id),
392
- formData.append("scenario", scenario),
393
- formData.append("prompt", prompt),
394
- formData.append("comments", comments),
395
-
396
- //const formData = new FormData();
397
- fetch('/api/save_prompt_details', {
398
- method: 'POST',
399
- body: formData
400
- })
401
- .then(response => {
402
- if (!response.ok) {
403
- throw new Error('Network response was not ok');
404
- }
405
- return response.text();
406
- })
407
- .then(data => {
408
- var table = $('#promptTable').DataTable();
409
- var rowCount = table.rows().count();
410
- table.row.add([
411
- rowCount + 1,
412
- scenario,
413
- prompt,
414
- view,
415
- edit,
416
- dele
417
- ]).draw(false);
418
-
419
- alert('Document saved successfully');
420
- $('#addModal').modal('hide');
421
- document.getElementById('contentSection').style.display = 'block'; // Show the table section
422
- })
423
- .catch(error => console.error('Error:', error));
424
- }
425
- async function fetchCompanies() {
426
- try {
427
- const response = await fetch('/api/companies');
428
- if (!response.ok) {
429
- throw new Error('Network response was not ok');
430
- }
431
- const data = await response.json();
432
- displayCompanies(data.companies);
433
- } catch (error) {
434
- console.error('Error fetching companies:', error);
435
- }
436
- }
437
-
438
- function displayCompanies(companies) {
439
- const companySelect = document.getElementById('company');
440
- companySelect.innerHTML = '<option value="" selected>Select</option>'; // Reset the dropdown
441
- companies.forEach(company => {
442
- const option = document.createElement('option');
443
- option.value = company.name;
444
- option.textContent = company.name;
445
- companySelect.appendChild(option);
446
- });
447
- }
448
- function clearFormFields() {
449
- document.getElementById('scenario').value = "";
450
- document.getElementById('prompt').value = "";
451
- document.getElementById('comments').value = "";
452
-
453
- }
454
-
455
-
456
- </script>
457
- </body>
458
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
459
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <title>Prompt Template</title>
6
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
7
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
8
+ <!-- Include AdminLTE CSS -->
9
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/adminlte.min.css">
10
+ <!-- Include DataTables CSS -->
11
+ <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
12
+ <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
13
+ <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
14
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
15
+ <style>
16
+ .header-row {
17
+ display: flex;
18
+ justify-content: space-between;
19
+ align-items: center;
20
+ }
21
+ .card {
22
+ padding: 0;
23
+ margin-top: -15px;
24
+ margin-left: -40px;
25
+ }
26
+ .table-container {
27
+ width: 100%;
28
+ overflow-x: auto;
29
+
30
+ }
31
+
32
+ .wrapper {
33
+ display: flex;
34
+ flex-direction: column;
35
+ height: 100vh;
36
+ }
37
+
38
+ .content-wrapper {
39
+ flex: 1;
40
+ overflow-y: auto;
41
+ }
42
+
43
+ .content-header {
44
+ padding: 5px;
45
+
46
+ }
47
+
48
+ div.dataTables_wrapper div.dataTables_length select{
49
+ width: 60px;
50
+ display: inline-block;
51
+ }
52
+
53
+ th,
54
+ td {
55
+ white-space: nowrap;
56
+ }
57
+
58
+ th:nth-child(1),
59
+ td:nth-child(1) {
60
+ /* Sno column */
61
+ width: 1%;
62
+ }
63
+
64
+ th:nth-child(2),
65
+ td:nth-child(2) {
66
+ /* API Name column */
67
+ width: 20%;
68
+ }
69
+
70
+ th:nth-child(3),
71
+ td:nth-child(3) {
72
+ /* API Endpoint column */
73
+ width: 45%;
74
+ }
75
+
76
+ th:nth-child(4),
77
+ td:nth-child(4) {
78
+ /* view column*/
79
+ width: 5%;
80
+ }
81
+ th:nth-child(5),
82
+ td:nth-child(5) {
83
+ /* view column*/
84
+ width: 5%;
85
+ }
86
+ th:nth-child(6),
87
+ td:nth-child(6) {
88
+ /* view column*/
89
+ width: 5%;
90
+ }
91
+
92
+ .reduced-width {
93
+ width: 25%;
94
+ }
95
+
96
+ .viewButton {
97
+ size: 2px;
98
+ }
99
+ div.dataTables_wrapper div.dataTables_length select{
100
+ width: 60px;
101
+ display: inline-block;
102
+ }
103
+ </style>
104
+ </head>
105
+
106
+ <body>
107
+ {% include 'sidepane.html' %}
108
+
109
+ <div class="wrapper">
110
+ <div class="main-header" style="border-bottom: none;">
111
+ <!-- Content Header (Page header) -->
112
+ <div class="content-header">
113
+ <div class="container-fluid">
114
+ <div class="container mt-2">
115
+ <div class="form-group left-align">
116
+ <label for="company" class="mr-1" style="margin-left:-60px;margin-top:-11px;">Company Name <span class="text-danger">*</span></label>
117
+ <select type="text" id="company" name="company" class="form-control "style="width: 20%;margin-left:-60px;" required>
118
+ <option value="" selected>Select</option>
119
+ </select>
120
+ <div class="col-12 d-flex justify-content-end mb-2">
121
+ <button class="btn btn-primary" style="margin-top:-40px;margin-right: -25px;position: fixed;" id="add">Add</button>
122
+
123
+ <!-- <button class="btn btn-primary" style="margin-top: 20px;" id="add">Add</button> -->
124
+ </div>
125
+ </div>
126
+ <div class="row">
127
+ <div id="message-container" style="margin-left: 150px;width:500px;"></div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ <section class="content" id="contentSection" style="display: none;">
133
+ <div class="container-fluid">
134
+ <div class="form-group">
135
+ <!-- <label for="company_id">company_id</label>--->
136
+ <input type="hidden" id="company_id" name="company_id" class="form-control" required>
137
+ </div>
138
+ </div>
139
+ <!-- Main content-->
140
+ <section class="content">
141
+ <div class="container-fluid">
142
+ <div class="row">
143
+ <div class="col-12">
144
+ <div class="card">
145
+ <div class="card-body table-container">
146
+ <table id="promptTable" class="table table-bordered table-striped">
147
+ <thead>
148
+ <tr>
149
+ <th>Sno</th>
150
+ <th>Datasource</th>
151
+ <th>Sample Prompt</th>
152
+ <th>View</th>
153
+ <th>Edit</th>
154
+ <th>Delete</th>
155
+ </tr>
156
+ </thead>
157
+ <tbody>
158
+ <!-- <tr>
159
+ <td>1</td>
160
+ <td>API</td>
161
+ <td>What are the details of ASN24080200002?</td>
162
+ <td><button class="btn btn-primary viewButton">View</button></td>
163
+ </tr>
164
+ <tr>
165
+ <td>2</td>
166
+ <td>API</td>
167
+ <td>What is the expected receiving date of ASN24080200002</td>
168
+ <td><button class="btn btn-primary viewButton">View</button></td>
169
+ </tr>
170
+ <tr>
171
+ <td>3</td>
172
+ <td>Document</td>
173
+ <td>Explain Pre-Receiving Yard Management</td>
174
+ <td><button class="btn btn-primary viewButton">View</button></td>
175
+ </tr>
176
+ <tr>
177
+ <td>4</td>
178
+ <td>Document</td>
179
+ <td>Can you explain the process of unloading a vehicle in more detail?</td>
180
+ <td><button class="btn btn-primary viewButton">View</button></td>
181
+ </tr>
182
+ <tr>
183
+ <td>5</td>
184
+ <td>Visual Analysis</td>
185
+ <td>I want to analyze item name and quantity in a bar chart in warehouse Allcargo Logistics</td>
186
+ <td><button class="btn btn-primary viewButton">View</button></td>
187
+ </tr>
188
+ <tr>
189
+ <td>6</td>
190
+ <td>Visual Analysis</td>
191
+ <td>Can you generate a pie chart with item names and quantities in warehouse Allcargo Logistics</td>
192
+ <td><button class="btn btn-primary viewButton">View</button></td>
193
+ </tr>
194
+ <tr>
195
+ <td>7</td>
196
+ <td>Database</td>
197
+ <td>What are the active warehouses available</td>
198
+ <td><button class="btn btn-primary viewButton">View</button></td>
199
+ </tr>
200
+ <tr>
201
+ <td>8</td>
202
+ <td>Database</td>
203
+ <td>What are the warehouses available</td>
204
+ <td><button class="btn btn-primary viewButton">View</button></td>
205
+ </tr>
206
+ -->
207
+ </tbody>
208
+ </table>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </section>
215
+ </section>
216
+ </div>
217
+
218
+ </div>
219
+
220
+
221
+
222
+ <!-- Modal -->
223
+ <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel"
224
+ aria-hidden="true">
225
+ <div class="modal-dialog" role="document">
226
+ <div class="modal-content">
227
+ <div class="modal-header">
228
+ <h5 class="modal-title" id="addModalLabel">Add Prompt templates</h5>
229
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
230
+ <span aria-hidden="true" data-backdrop="static" data-keyboard="false">&times;</span>
231
+ </div>
232
+ <div class="modal-body">
233
+ <div class="form-group">
234
+ <!-- <label for="company_id">company_id</label>--->
235
+ <input type="hidden" id="company_id" name="company_id" class="form-control" required>
236
+ </div>
237
+ <form id="addPromptForm">
238
+ <div class="form-group">
239
+ <label for="scenario">Scenario <span class="text-danger">*</span></label>
240
+ <input type="text" class="form-control" id="scenario" name="scenario" required>
241
+ </div>
242
+ <div class="form-group">
243
+ <label for="prompt">Sample Prompt <span class="text-danger">*</span></label>
244
+ <input type="text" class="form-control" id="prompt" name="sampleprompt" required>
245
+ </div>
246
+ <div class="form-group">
247
+ <label for="comments">Comments <span class="text-danger">*</span></label>
248
+ <input type="text" class="form-control" id="comments" name="comments" required>
249
+ </div>
250
+ </form>
251
+ </div>
252
+ <div class="modal-footer">
253
+ <button type="button" id="saveupdate" class="btn btn-primary" style="display: none;">Update</button>
254
+ <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> -->
255
+ <button type="button" id="save" onclick="save_file()" class="btn btn-primary">Save</button>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ { %include 'footer.html'%}
262
+ <!-- Include DataTables JS and your custom script -->
263
+ <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
264
+ <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
265
+ <script>
266
+ $(document).ready(function () {
267
+ $('#add').on('click', function () {
268
+ const modalTitle = document.getElementById('addModalLabel');
269
+ modalTitle.textContent = 'Add Prompt Template Details';
270
+ $('#scenario').removeAttr('readonly');
271
+ $('#prompt').removeAttr('readonly');
272
+ $('#comments').removeAttr('readonly');
273
+ $('#saveupdate').hide();
274
+ $('#save').show();
275
+ clearFormFields();
276
+ $('#message-container').empty(); // Clear the message container
277
+ $('#addModal').modal('show');
278
+ });
279
+ $('.modal-footer .btn-secondary, .modal-header .close').on('click', function () {
280
+ $('#addModal').modal('hide');
281
+ });
282
+
283
+ });
284
+ document.addEventListener("DOMContentLoaded", function () {
285
+
286
+ // clearFormFields();
287
+ fetchCompanies();
288
+
289
+ const companySelect = document.getElementById('company');
290
+ const addPromptForm = document.getElementById('addPromptForm');
291
+ const table = $('#promptTable').DataTable();
292
+ // Initialize DataTable at the start
293
+ companySelect.addEventListener('change', async function () {
294
+ $("#message-container").empty();
295
+ const selectedCompanyName = companySelect.options[companySelect.selectedIndex].text;
296
+ console.log(`Selected Company Name: ${selectedCompanyName}`);
297
+
298
+ if (selectedCompanyName !== "Select") {
299
+
300
+ try {
301
+ const response = await fetch(`/api/company_id?company_name=${encodeURIComponent(selectedCompanyName)}`);
302
+ if (!response.ok) {
303
+ contentSection.style.display = 'none';
304
+ ("company id does not exist for name does not exist. Please fill in the details.");
305
+ const messageContainer = document.getElementById('message-container');
306
+ if (messageContainer) {
307
+ messageContainer.innerHTML = "<div class='alert alert-danger'>Promptdetails do not exist for this company. Please fill in the details.</div>";
308
+ }
309
+ throw new Error('Network response was not ok');
310
+ }
311
+ const data = await response.json();
312
+ console.log('data returned', data);
313
+ console.log(`Company ID: ${data.company_id}`);
314
+ const companyId = data.company_id;
315
+ document.getElementById('company_id').value = companyId;
316
+
317
+ if (companyId) {
318
+ try {
319
+ const Response = await fetch(`/api/get_prompt_templates?company_id=${companyId}&company_name=${selectedCompanyName}`);
320
+ const connectorsResponse = await Response.json();
321
+ console.log("prompt template data table after connecting to table", connectorsResponse);
322
+ table.clear();
323
+ if (!Array.isArray(connectorsResponse)) {
324
+ throw new TypeError('Expected an array of companies');
325
+
326
+ displayErrorMessage("prompt template details do not exist for this company. Please fill in the details.");
327
+ contentSection.style.display = 'none';
328
+ } else {
329
+
330
+ connectorsResponse.forEach((company, index) => {
331
+ table.row.add([
332
+ index + 1,
333
+ company.scenario,
334
+ company.prompt,
335
+ `<a href='#' class='btn btn-info btn-sm'data-kid-id='${company.row_id}' data-action="view" onclick='viewCompany(this)''><i class='fas fa-eye'></i></a>`,
336
+ `<a href='#' class='btn btn-warning btn-sm'data-kid-id='${company.row_id}' data-action="edit" onclick='editCompany(this)'><i class='fas fa-edit'></i></a>`,
337
+ `<a href='#' class='btn btn-danger btn-sm' data-kid-id='${company.row_id}' onclick='deleteCompany(this)'><i class='fas fa-trash'></i></a>`,
338
+ // "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye' fa-eye'></i></a>",
339
+ // "<a href='#' class='btn btn-warning btn-sm'><i class='fas fa-edit'></i></a>",
340
+ // "<a href='#' class='btn btn-danger btn-sm'><i class='fas fa-trash'></i></button>"
341
+ ]).draw(false);
342
+ });
343
+ contentSection.style.display = 'block';
344
+ }
345
+
346
+ } catch (error) {
347
+ console.error('Error fetching company documents:', error);
348
+ //displayEmptyTable();
349
+
350
+ displayErrorMessage("Prompt template do not exist for this company. Please fill in the details by clicking add button.");
351
+ contentSection.style.display = 'none';
352
+ }
353
+ }
354
+ else {
355
+ // displayEmptyTable();
356
+
357
+ displayErrorMessage("Company id do not exist for this company. Please fill in the details by clicking add button.");
358
+ }
359
+ } catch (error) {
360
+ console.error('No details for this company ID or data documents:', error);
361
+ // displayEmptyTable();
362
+
363
+ displayErrorMessage("Prompt details do not exist for this company. Please fill in the details.");
364
+ contentSection.style.display = 'none';
365
+ }
366
+ } else {
367
+
368
+ table.clear().draw();
369
+ document.getElementById('contentSection').style.display = 'none';
370
+ // Optionally, you might want to clear the form fields as well
371
+ clearFormFields();
372
+
373
+ }
374
+ });
375
+ function displayErrorMessage(message) {
376
+ const messageContainer = document.getElementById('message-container');
377
+ if (messageContainer) {
378
+ messageContainer.innerHTML = `<div class='alert alert-danger'>${message}</div>`;
379
+ }
380
+ }
381
+
382
+ });
383
+ // Delete company
384
+ function deleteCompany(button) {
385
+ var companyId = $(button).data('kid-id');
386
+ console.log("k_id deleted",companyId);
387
+ $.ajax({
388
+ type: "DELETE",
389
+ url: `/api/prompt_template_for_del/${companyId}`,
390
+ success: function () {
391
+ var table = $('#promptTable').DataTable();
392
+ table.row($(button).closest('tr')).remove().draw();
393
+
394
+ //alert("Company deleted successfully.");
395
+ const messageContainer = document.getElementById('message-container');
396
+ if(messageContainer)
397
+ messageContainer.innerHTML = `
398
+ <div class='alert alert-danger'>
399
+ Prompt details deleted successfully
400
+ <button class='close' onclick='dismissMessage()'>OK</button>
401
+ </div>`;
402
+ fetchCompanies(); // Refresh the table
403
+ },
404
+ error: function (xhr) {
405
+ alert("Error deleting company: " + xhr.responseJSON.detail);
406
+ }
407
+ });
408
+ }
409
+ // view company ! ...
410
+ function viewCompany(button) {
411
+ var companyId = $(button).data('kid-id');
412
+ const modalTitle = document.getElementById('addModalLabel');
413
+ modalTitle.textContent = 'View Prompt Template Details';
414
+ console.log("view promt id (Rowid) ===> " , companyId)
415
+ $.getJSON(`/api/getpromttemplate/${companyId}`, function (company) {
416
+ console.log("view data scenario =====> ",company.scenario)
417
+ console.log("view data prompt =====> ",company.prompt)
418
+ console.log("view data comments =====> ",company.comments)
419
+ $('#scenario').val(company.scenario).attr('readonly','readonly');
420
+ $('#prompt').val(company.prompts).attr('readonly', 'readonly');
421
+ $('#comments').val(company.comments).attr('readonly', 'readonly');
422
+ $('#save').hide();// Disable the "Save" button when the modal opens
423
+ $('#addModal').modal('show');
424
+ $('#saveupdate').hide();
425
+ }).fail(function () {
426
+ alert("Error retrieving company details.");
427
+ });
428
+ }
429
+ // Edit company details
430
+
431
+ function editCompany(button) {
432
+ var companyId = $(button).data('kid-id');
433
+ const modalTitle = document.getElementById('addModalLabel');
434
+ modalTitle.textContent = 'Edit Prompt Templates Details';
435
+
436
+ console.info("company id ====#> ", companyId);
437
+ $.getJSON(`/api/getpromttemplate/${companyId}`, function (company) {
438
+ $('#scenario').val(company.scenario).removeAttr('readonly');
439
+ $('#prompt').val(company.prompts).removeAttr('readonly');
440
+ $('#comments').val(company.comments).removeAttr('readonly');
441
+ $('#save').hide();
442
+ $('#saveupdate').show();
443
+
444
+ $('#addModal').modal('show');
445
+
446
+ // Update the save button to save the edited company
447
+ $('#saveupdate').off('click').on('click', function () {
448
+ saveupdate(companyId); // Pass the company ID for updating
449
+ });
450
+ console.log(" edit process completed !")
451
+ }).fail(function () {
452
+ alert("Error retrieving company details.");
453
+ });
454
+ }
455
+
456
+ // Save the updated details
457
+ function saveupdate(companyId) {
458
+ console.log("k_id for updating process _ id ! ..,..", companyId);
459
+ const company_id=document.getElementById("company_id").value;
460
+ var formData = new FormData();
461
+ formData.append('scenario', $('#scenario').val());
462
+ formData.append('prompt', $('#prompt').val());
463
+ formData.append('comments', $('#comments').val());
464
+ console.log("edited form data saved process begin ! ....", formData);
465
+
466
+ $.ajax({
467
+ url: `/api/putprompttemplates/${companyId}`,
468
+ type: 'PUT',
469
+ data: formData,
470
+ processData: false, // Required for FormData
471
+ contentType: false, // Required for FormData
472
+ success: function (response) {
473
+ // alert('Prompt details updated successfully.');
474
+ const messageContainer = document.getElementById('message-container');
475
+ if(messageContainer)
476
+ messageContainer.innerHTML = `
477
+ <div class='alert alert-success'>
478
+ Prompt Data updated successfully
479
+ <button class='close' onclick='dismissMessage()'>OK</button>
480
+ </div>`;
481
+ $('#addModal').modal('hide'); // Close the modal after saving
482
+ fetchUpdatedDocuments(company_id);
483
+ },
484
+ error: function () {
485
+ alert('Form has no changes to update prompt details.');
486
+      }
487
+     });
488
+ }
489
+ function dismissMessage() {
490
+ const messageContainer = document.getElementById('message-container');
491
+ if (messageContainer) {
492
+ messageContainer.innerHTML = '';
493
+ }
494
+ }
495
+ async function fetchUpdatedDocuments(company_id) {
496
+ console.log("company_id",company_id);
497
+ var table = $('#promptTable').DataTable();
498
+ const Response = await fetch(`/api/prompt_update?company_id=${company_id}`);
499
+ const connectorsResponse = await Response.json();
500
+ console.log("prompt data table after connecting to table", connectorsResponse);
501
+ table.clear();
502
+ if (!Array.isArray(connectorsResponse) || connectorsResponse.length === 0) {
503
+ //displayEmptyTable();
504
+
505
+ displayErrorMessage("Promptdetails do not exist for this company. Please fill in the details.");
506
+ contentSection.style.display = 'none';
507
+ } else {
508
+
509
+ connectorsResponse.forEach((company, index) => {
510
+ table.row.add([
511
+
512
+ index + 1,
513
+ company.scenario,
514
+ company.prompts,
515
+ `<a href='#' class='btn btn-info btn-sm'data-kid-id='${company.id}' data-action="view" onclick='viewCompany(this)''><i class='fas fa-eye'></i></a>`,
516
+ `<a href='#' class='btn btn-warning btn-sm'data-kid-id='${company.id}' data-action="edit" onclick='editCompany(this)'><i class='fas fa-edit'></i></a>`,
517
+ //`<a href='#' class='btn btn-danger btn-sm' onclick='deleteCompany(${company.company_id})'><i class='fas fa-trash'></i></a>`,
518
+ `<a href='#' class='btn btn-danger btn-sm' data-kid-id='${company.id}' onclick='deleteCompany(this)'><i class='fas fa-trash'></i></a>`,
519
+ company.id
520
+ // "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye'></i></a>",
521
+ // "<a href='#' class='btn btn-warning btn-sm'><i class='fas fa-edit'></i></a>",
522
+ // "<a href='#' class='btn btn-danger btn-sm'><i class='fas fa-trash'></i></button>"
523
+ ]).draw(false);
524
+ });
525
+ contentSection.style.display = 'block';
526
+ }
527
+ }
528
+ function save_file() {
529
+ const form = document.getElementById('addPromptForm');
530
+
531
+ // Check if the form is valid
532
+ if (!form.checkValidity()) {
533
+ // If the form is invalid, show validation messages and stop the submission
534
+ form.reportValidity();
535
+ return;
536
+ }
537
+ const company_id = $('#company_id').val();
538
+ const scenario = $('#scenario').val();
539
+ const prompt = $('#prompt').val();
540
+ const comments = $('#comments').val();
541
+
542
+ // const view = "<a href='#' class='btn btn-info btn-sm'><i class='fas fa-eye'></i></a>";
543
+ // const edit = "<a href='#' class='btn btn-warning btn-sm'><i class='fas fa-edit'></i></a>";
544
+ // const dele = "<a href='#' class='btn btn-danger btn-sm'><i class='fas fa-trash'></i></a>";
545
+
546
+ var formData = new FormData($('#addPromptForm')[0]);
547
+ const messageContainer = document.getElementById('message-container');
548
+ formData.append("company_id", company_id),
549
+ formData.append("scenario", scenario),
550
+ formData.append("prompt", prompt),
551
+ formData.append("comments", comments),
552
+
553
+ //const formData = new FormData();
554
+ fetch('/api/save_prompt_details', {
555
+ method: 'POST',
556
+ body: formData
557
+ })
558
+ .then(response => {
559
+ if (!response.ok) {
560
+ throw new Error('Network response was not ok');
561
+ }
562
+ return response.text();
563
+ })
564
+ .then(data => {
565
+ const row_id = data.row_id;
566
+ console.log("rowid",row_id);
567
+ var table = $('#promptTable').DataTable();
568
+ var rowCount = table.rows().count();
569
+ const view=`<a href='#' class='btn btn-info btn-sm'data-kid-id='${row_id}' data-action="view" onclick='viewCompany(this)''><i class='fas fa-eye'></i></a>`;
570
+ const edit=`<a href='#' class='btn btn-warning btn-sm'data-kid-id='${row_id}' data-action="edit" onclick='editCompany(this)'><i class='fas fa-edit'></i></a>`;
571
+ const dele= `<a href='#' class='btn btn-danger btn-sm' data-kid-id='${row_id}' onclick='deleteCompany(this)'><i class='fas fa-trash'></i></a>`;
572
+ table.row.add([
573
+ rowCount + 1,
574
+ scenario,
575
+ prompt,
576
+ view,
577
+ edit,
578
+ dele
579
+ ]).draw(false);
580
+
581
+ // const messageContainer = document.getElementById('message-container');
582
+ if(messageContainer)
583
+ messageContainer.innerHTML = `
584
+ <div class='alert alert-success'>
585
+ Data saved successfully
586
+ <button class='close' onclick='dismissMessage()'>OK</button>
587
+ </div>`;
588
+ $('#addModal').modal('hide');
589
+ document.getElementById('contentSection').style.display = 'block'; // Show the table section
590
+ })
591
+ .catch(error => console.error('Error:', error));
592
+ }
593
+ async function fetchCompanies() {
594
+ try {
595
+ const response = await fetch('/api/companies');
596
+ if (!response.ok) {
597
+ throw new Error('Network response was not ok');
598
+ }
599
+ const data = await response.json();
600
+ displayCompanies(data.companies);
601
+ } catch (error) {
602
+ console.error('Error fetching companies:', error);
603
+ }
604
+ }
605
+
606
+ function displayCompanies(companies) {
607
+ const companySelect = document.getElementById('company');
608
+ companySelect.innerHTML = '<option value="" selected>Select</option>'; // Reset the dropdown
609
+ companies.forEach(company => {
610
+ const option = document.createElement('option');
611
+ option.value = company.name;
612
+ option.textContent = company.name;
613
+ companySelect.appendChild(option);
614
+ });
615
+ }
616
+ function clearFormFields() {
617
+ document.getElementById('scenario').value = "";
618
+ document.getElementById('prompt').value = "";
619
+ document.getElementById('comments').value = "";
620
+
621
+ }
622
+
623
+
624
+ </script>
625
+ </body>
626
+
627
  </html>