Moved AI Reword Buttons to the WYSISYG toolbar, Seperated Document and ticket toolbars. Ticket Toolbar has items related to tickets while document has additional items related to documents

This commit is contained in:
johnnyq 2024-11-19 15:33:14 -05:00
parent 9d44d3e849
commit dcedddcad6
9 changed files with 214 additions and 96 deletions

View File

@ -63,10 +63,8 @@ require_once "inc_all_admin.php";
</form>
<div class="mt-5">
<h1>Test Input Text to Reword</h1>
<textarea id="textInput" class="form-control tinymceai mb-3" rows="10"></textarea>
<button id="rewordButton" class="btn btn-primary"><i class="fas fa-fw fa-robot mr-2"></i>Reword</button>
<button id="undoButton" class="btn btn-secondary" style="display:none;"><i class="fas fa-fw fa-redo-alt mr-2"></i>Undo</button>
<h5>Test AI Rewording</h5>
<textarea id="textInput" class="form-control tinymceAI mb-3" rows="10"></textarea>
</div>
<script src="js/ai_reword.js"></script>

View File

@ -39,7 +39,11 @@ echo getUserAgent();
<?php echo randomString(100); ?>
<br>
<textarea class="tinymceTest"></textarea>
<textarea class="tinymce"></textarea>
<textarea class="tinymceTicket"></textarea>
<?php
// show the current Date and Time
$date_time = date('Y-m-d H:i:s');

View File

@ -22,21 +22,10 @@
</div>
</div>
<?php if($config_ai_enable) { ?>
<div class="form-group">
<textarea class="form-control tinymceai" id="textInput" name="bulk_details"></textarea>
<textarea class="form-control tinymceTicket<?php if($config_ai_enable) { echo "AI"; } ?>" id="textInput" name="bulk_details"></textarea>
</div>
<div class="mb-3">
<button id="rewordButton" class="btn btn-primary" type="button"><i class="fas fa-fw fa-robot mr-2"></i>Reword</button>
<button id="undoButton" class="btn btn-secondary" type="button" style="display:none;"><i class="fas fa-fw fa-redo-alt mr-2"></i>Undo</button>
</div>
<?php } else { ?>
<div class="form-group">
<textarea class="form-control tinymce" rows="5" name="bulk_details"></textarea>
</div>
<?php } ?>
<div class="row">
<div class="col">

View File

@ -15,20 +15,9 @@
<input type="text" class="form-control" name="name" placeholder="Name" required autofocus>
</div>
<?php if($config_ai_enable) { ?>
<div class="form-group">
<textarea class="form-control tinymceai" id="textInput" name="content"></textarea>
<textarea class="form-control tinymce<?php if($config_ai_enable) { echo "AI"; } ?>" id="textInput" name="content"></textarea>
</div>
<div class="mb-3">
<button id="rewordButton" class="btn btn-primary" type="button"><i class="fas fa-fw fa-robot mr-2"></i>Reword</button>
<button id="undoButton" class="btn btn-secondary" type="button" style="display:none;"><i class="fas fa-fw fa-redo-alt mr-2"></i>Undo</button>
</div>
<?php } else { ?>
<div class="form-group">
<textarea class="form-control tinymce" name="content"></textarea>
</div>
<?php } ?>
<div class="form-group">
<label for="folderSelect">Select Folder</label>

View File

@ -18,22 +18,10 @@
<input type="text" class="form-control" name="name" value="<?php echo $document_name; ?>" placeholder="Name" required>
</div>
<?php if($config_ai_enable) { ?>
<div class="form-group">
<textarea class="form-control tinymceai" id="textInput" name="content"><?php echo $document_content; ?></textarea>
<textarea class="form-control tinymce<?php if($config_ai_enable) { echo "AI"; } ?>" id="textInput" name="content"><?php echo $document_content; ?></textarea>
</div>
<div class="mb-3">
<button id="rewordButton" class="btn btn-primary" type="button"><i class="fas fa-fw fa-robot mr-2"></i>Reword</button>
<button id="undoButton" class="btn btn-secondary" type="button" style="display:none;"><i class="fas fa-fw fa-redo-alt mr-2"></i>Undo</button>
</div>
<?php } else { ?>
<div class="form-group">
<textarea class="form-control tinymce" name="content"><?php echo $document_content; ?></textarea>
</div>
<?php } ?>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">

237
js/app.js
View File

@ -42,9 +42,9 @@ tinymce.init({
plugins: 'link image lists table code codesample fullscreen autoresize',
});
// Initialize TinyMCE AI
// Initialize TinyMCE
tinymce.init({
selector: '.tinymceai',
selector: '.tinymceAI',
browser_spellcheck: true,
contextmenu: false,
resize: true,
@ -55,7 +55,140 @@ tinymce.init({
menubar: false,
statusbar: false,
toolbar: [
'styles bold italic forecolor bullist numlist alignleft aligncenter alignright alignjustify outdent indent table code fullscreen'
{ name: 'styles', items: [ 'styles' ] },
{ name: 'formatting', items: [ 'bold', 'italic', 'forecolor' ] },
{ name: 'lists', items: [ 'bullist', 'numlist' ] },
{ name: 'alignment', items: [ 'alignleft', 'aligncenter', 'alignright', 'alignjustify' ] },
{ name: 'indentation', items: [ 'outdent', 'indent' ] },
{ name: 'table', items: [ 'table' ] },
{ name: 'extra', items: [ 'code', 'fullscreen' ] },
{ name: 'ai', items: [ 'reword', 'undo', 'redo' ] }
],
mobile: {
menubar: false,
plugins: 'autosave lists autolink',
toolbar: 'bold italic styles'
},
plugins: 'link image lists table code codesample fullscreen autoresize',
setup: function(editor) {
var rewordButtonApi;
editor.ui.registry.addButton('reword', {
icon: 'ai',
tooltip: 'Reword Text',
onAction: function() {
var content = editor.getContent();
// Disable the Reword button
rewordButtonApi.setEnabled(false);
// Show the progress indicator
editor.setProgressState(true);
fetch('post.php?ai_reword', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ text: content }),
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
editor.undoManager.transact(function() {
editor.setContent(data.rewordedText || 'Error: Could not reword the text.');
});
// Hide the progress indicator
editor.setProgressState(false);
// Re-enable the Reword button
rewordButtonApi.setEnabled(true);
// Optional: Show a success notification
editor.notificationManager.open({
text: 'Text reworded successfully!',
type: 'success',
timeout: 3000
});
})
.catch(error => {
console.error('Error:', error);
// Hide the progress indicator
editor.setProgressState(false);
// Re-enable the Reword button
rewordButtonApi.setEnabled(true);
// Show an error notification
editor.notificationManager.open({
text: 'An error occurred while rewording the text.',
type: 'error',
timeout: 5000
});
});
},
onSetup: function(buttonApi) {
rewordButtonApi = buttonApi;
return function() {
// Cleanup when the editor is destroyed (if necessary)
};
}
});
}
});
tinymce.init({
selector: '.tinymceTicket',
browser_spellcheck: true,
contextmenu: false,
resize: true,
min_height: 300,
max_height: 600,
promotion: false,
branding: false,
menubar: false,
statusbar: false,
toolbar: [
{ name: 'styles', items: [ 'styles' ] },
{ name: 'formatting', items: [ 'bold', 'italic', 'forecolor'] },
{ name: 'link', items: [ 'link'] },
{ name: 'lists', items: [ 'bullist', 'numlist' ] },
{ name: 'indentation', items: [ 'outdent', 'indent' ] }
],
mobile: {
menubar: false,
plugins: 'autosave lists autolink',
toolbar: 'bold italic styles'
},
plugins: 'link image lists table code fullscreen autoresize',
});
// Initialize TinyMCE AI
tinymce.init({
selector: '.tinymceTicketAI',
browser_spellcheck: true,
contextmenu: false,
resize: true,
min_height: 300,
max_height: 600,
promotion: false,
branding: false,
menubar: false,
statusbar: false,
toolbar: [
{ name: 'styles', items: [ 'styles' ] },
{ name: 'formatting', items: [ 'bold', 'italic', 'forecolor'] },
{ name: 'link', items: [ 'link'] },
{ name: 'lists', items: [ 'bullist', 'numlist' ] },
{ name: 'indentation', items: [ 'outdent', 'indent' ] },
{ name: 'ai', items: [ 'reword', 'undo', 'redo' ] }
],
mobile: {
menubar: false,
@ -63,42 +196,74 @@ tinymce.init({
},
plugins: 'link image lists table code codesample fullscreen autoresize',
setup: function(editor) {
var previousContent = ''; // Initialize previousContent outside the event listener
document.getElementById('rewordButton').addEventListener('click', function() {
var content = editor.getContent();
previousContent = content; // Store the current content before rewording
var rewordButton = document.getElementById('rewordButton');
var undoButton = document.getElementById('undoButton');
var rewordButtonApi;
// Disable the Reword button and show loading state
rewordButton.disabled = true;
rewordButton.innerText = 'Processing...';
editor.ui.registry.addButton('reword', {
icon: 'ai',
tooltip: 'Reword Text',
onAction: function() {
var content = editor.getContent();
fetch('post.php?ai_reword', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ text: content }),
})
.then(response => response.json())
.then(data => {
editor.setContent(data.rewordedText || 'Error: Could not reword the text.');
rewordButton.disabled = false;
rewordButton.innerText = 'Reword'; // Reset button text
undoButton.style.display = 'inline'; // Show the Undo button
})
.catch(error => {
console.error('Error:', error);
rewordButton.disabled = false;
rewordButton.innerText = 'Reword'; // Reset button text
});
// Disable the Reword button
rewordButtonApi.setEnabled(false);
// Setup the Undo button click event only once, not every time the reword button is clicked
undoButton.onclick = function() {
editor.setContent(previousContent);
this.style.display = 'none'; // Hide the Undo button again
};
// Show the progress indicator
editor.setProgressState(true);
fetch('post.php?ai_reword', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ text: content }),
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
editor.undoManager.transact(function() {
editor.setContent(data.rewordedText || 'Error: Could not reword the text.');
});
// Hide the progress indicator
editor.setProgressState(false);
// Re-enable the Reword button
rewordButtonApi.setEnabled(true);
// Optional: Show a success notification
editor.notificationManager.open({
text: 'Text reworded successfully!',
type: 'success',
timeout: 3000
});
})
.catch(error => {
console.error('Error:', error);
// Hide the progress indicator
editor.setProgressState(false);
// Re-enable the Reword button
rewordButtonApi.setEnabled(true);
// Show an error notification
editor.notificationManager.open({
text: 'An error occurred while rewording the text.',
type: 'error',
timeout: 5000
});
});
},
onSetup: function(buttonApi) {
rewordButtonApi = buttonApi;
return function() {
// Cleanup when the editor is destroyed (if necessary)
};
}
});
}
});

View File

@ -45,7 +45,7 @@
</div>
<div class="form-group">
<textarea class="form-control tinymce" name="details"></textarea>
<textarea class="form-control tinymceTicket<?php if($config_ai_enable) { echo "AI"; } ?>" id="textInput" name="details"></textarea>
</div>
<div class="form-group">

View File

@ -624,7 +624,7 @@ if (isset($_GET['ticket_id'])) {
</div>
<div class="form-group">
<textarea class="form-control tinymce<?php if ($config_ai_enable) { echo "ai"; } ?>" id="textInput" name="ticket_reply" placeholder="Type a response"></textarea>
<textarea class="form-control tinymceTicket<?php if ($config_ai_enable) { echo "AI"; } ?>" id="textInput" name="ticket_reply" placeholder="Type a response"></textarea>
</div>
<div class="form-row">
@ -674,10 +674,6 @@ if (isset($_GET['ticket_id'])) {
<div class="col-md-3">
<div class="btn-toolbar float-right">
<?php if ($config_ai_enable) { ?>
<button id="rewordButton" class="btn btn-secondary ml-3" type="button"><i class="fas fa-fw fa-robot mr-2"></i>Reword</button>
<button id="undoButton" class="btn btn-secondary ml-3" type="button" style="display:none;"><i class="fas fa-fw fa-redo-alt mr-2"></i>Undo</button>
<?php } ?>
<button type="submit" id="ticket_add_reply" name="add_ticket_reply" class="btn btn-success ml-3"><i class="fas fa-check mr-2"></i>Submit</button>
</div>
</div>

View File

@ -112,21 +112,10 @@
</div>
</div>
<?php if($config_ai_enable) { ?>
<div class="form-group">
<textarea class="form-control tinymceai" id="detailsInput" name="details"></textarea>
<textarea class="form-control tinymceTicket<?php if($config_ai_enable) { echo "AI"; } ?>" id="detailsInput" name="details"></textarea>
</div>
<div class="mb-3">
<button id="rewordButton" class="btn btn-primary" type="button"><i class="fas fa-fw fa-robot mr-2"></i>Reword</button>
<button id="undoButton" class="btn btn-secondary" type="button" style="display:none;"><i class="fas fa-fw fa-redo-alt mr-2"></i>Undo</button>
</div>
<?php } else { ?>
<div class="form-group">
<textarea class="form-control tinymce" id="detailsInput" rows="5" name="details"></textarea>
</div>
<?php } ?>
<div class="row">
<div class="col">