<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[12633] sites/trunk/wordpress.org/public_html/wp-content/plugins/gp-translation-helpers: Translate: Use the streaming review response from ChatGPT</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="http://meta.trac.wordpress.org/changeset/12633">12633</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"http://meta.trac.wordpress.org/changeset/12633","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>akirk</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2023-06-08 03:07:08 +0000 (Thu, 08 Jun 2023)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Translate: Use the streaming review response from ChatGPT</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentpluginsgptranslationhelpersincludesclassgptranslationhelpersphp">sites/trunk/wordpress.org/public_html/wp-content/plugins/gp-translation-helpers/includes/class-gp-translation-helpers.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentpluginsgptranslationhelpersjseditorjs">sites/trunk/wordpress.org/public_html/wp-content/plugins/gp-translation-helpers/js/editor.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentpluginsgptranslationhelpersincludesclassgptranslationhelpersphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/plugins/gp-translation-helpers/includes/class-gp-translation-helpers.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/plugins/gp-translation-helpers/includes/class-gp-translation-helpers.php 2023-06-08 02:34:42 UTC (rev 12632)
+++ sites/trunk/wordpress.org/public_html/wp-content/plugins/gp-translation-helpers/includes/class-gp-translation-helpers.php 2023-06-08 03:07:08 UTC (rev 12633)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -401,12 +401,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'gp-comment-feedback-js',
</span><span class="cx" style="display: block; padding: 0 10px"> '$gp_comment_feedback_settings',
</span><span class="cx" style="display: block; padding: 0 10px"> array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'url' => admin_url( 'admin-ajax.php' ),
- 'nonce' => wp_create_nonce( 'gp_comment_feedback' ),
- 'locale_slug' => $translation_set['locale_slug'],
- 'language' => $gp_locale ? $gp_locale->english_name : 'Unknown',
- 'has_openai_key' => !! apply_filters( 'gp_get_openai_key', null ),
- 'comment_reasons' => Helper_Translation_Discussion::get_comment_reasons( $translation_set['locale_slug'] ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'url' => admin_url( 'admin-ajax.php' ),
+ 'nonce' => wp_create_nonce( 'gp_comment_feedback' ),
+ 'locale_slug' => $translation_set['locale_slug'],
+ 'language' => $gp_locale ? $gp_locale->english_name : 'Unknown',
+ 'openai_key' => apply_filters( 'gp_get_openai_key', null ),
+ 'openai_temperature' => apply_filters( 'gp_get_openai_temperature', 0.8 ),
+ 'comment_reasons' => Helper_Translation_Discussion::get_comment_reasons( $translation_set['locale_slug'] ),
</ins><span class="cx" style="display: block; padding: 0 10px"> )
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentpluginsgptranslationhelpersjseditorjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/plugins/gp-translation-helpers/js/editor.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/plugins/gp-translation-helpers/js/editor.js 2023-06-08 02:34:42 UTC (rev 12632)
+++ sites/trunk/wordpress.org/public_html/wp-content/plugins/gp-translation-helpers/js/editor.js 2023-06-08 03:07:08 UTC (rev 12633)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,13 +1,13 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* global $gp, $gp_translation_helpers_editor, wpApiSettings, $gp_comment_feedback_settings, console, $gp_editor_options */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* global $gp, $gp_translation_helpers_editor, wpApiSettings, $gp_comment_feedback_settings, console, $gp_editor_options, EventSource */
</ins><span class="cx" style="display: block; padding: 0 10px"> /* eslint camelcase: "off" */
</span><span class="cx" style="display: block; padding: 0 10px"> jQuery( function( $ ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var focusedRowId = '';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ let focusedRowId = '';
</ins><span class="cx" style="display: block; padding: 0 10px"> // When a user clicks on a sidebar tab, the visible tab and div changes.
</span><span class="cx" style="display: block; padding: 0 10px"> $gp.editor.table.on( 'click', '.sidebar-tabs li', function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var tab = $( this );
- var tabId = tab.attr( 'data-tab' );
- var divId = tabId.replace( 'tab', 'div' );
- var originalId = tabId.replace( /[^\d-]/g, '' ).replace( /^-+/g, '' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const tab = $( this );
+ const tabId = tab.attr( 'data-tab' );
+ const divId = tabId.replace( 'tab', 'div' );
+ const originalId = tabId.replace( /[^\d-]/g, '' ).replace( /^-+/g, '' );
</ins><span class="cx" style="display: block; padding: 0 10px"> change_visible_tab( tab );
</span><span class="cx" style="display: block; padding: 0 10px"> change_visible_div( divId, originalId );
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -16,9 +16,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // or with the hotkeys), the translation textarea is focused, so the tabs (header tabs and
</span><span class="cx" style="display: block; padding: 0 10px"> // divs with the content) for the right sidebar are updated.
</span><span class="cx" style="display: block; padding: 0 10px"> $gp.editor.table.on( 'focus', 'tr.editor textarea.foreign-text', function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var tr = $( this ).closest( 'tr.editor' );
- var rowId = tr.attr( 'row' );
- var translation_status = tr.find( '.panel-header' ).find( 'span' ).html();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const tr = $( this ).closest( 'tr.editor' );
+ const rowId = tr.attr( 'row' );
+ const translation_status = tr.find( '.panel-header' ).find( 'span' ).html();
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( focusedRowId === rowId ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -25,7 +25,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> focusedRowId = rowId;
</span><span class="cx" style="display: block; padding: 0 10px"> loadTabsAndDivs( tr );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( $gp_comment_feedback_settings.has_openai_key && $gp_editor_options.can_approve && ( 'waiting' === translation_status || 'fuzzy' === translation_status ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( $gp_comment_feedback_settings.openai_key && $gp_editor_options.can_approve && ( 'waiting' === translation_status || 'fuzzy' === translation_status ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> fetchOpenAIReviewResponse( rowId, tr, false );
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> tr.find( '.openai-review' ).hide();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -33,8 +33,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $gp.editor.table.on( 'click', 'a.retry-auto-review', function( event ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var tr = $( this ).closest( 'tr.editor' );
- var rowId = tr.attr( 'row' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const tr = $( this ).closest( 'tr.editor' );
+ const rowId = tr.attr( 'row' );
</ins><span class="cx" style="display: block; padding: 0 10px"> event.preventDefault();
</span><span class="cx" style="display: block; padding: 0 10px"> tr.find( '.openai-review .auto-review-result' ).html( '' );
</span><span class="cx" style="display: block; padding: 0 10px"> tr.find( '.openai-review .suggestions__loading-indicator' ).show();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -43,7 +43,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Shows/hides the reply form for a comment in the discussion.
</span><span class="cx" style="display: block; padding: 0 10px"> $gp.editor.table.on( 'click', 'a.comment-reply-link', function( event ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var commentId = $( this ).attr( 'data-commentid' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const commentId = $( this ).attr( 'data-commentid' );
</ins><span class="cx" style="display: block; padding: 0 10px"> event.preventDefault();
</span><span class="cx" style="display: block; padding: 0 10px"> $( '#comment-reply-' + commentId ).toggle().find( 'textarea' ).focus();
</span><span class="cx" style="display: block; padding: 0 10px"> if ( $gp_translation_helpers_editor.reply_text === $( this ).text() ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -57,7 +57,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // Creates a shadow post, with a format like "gth_original9753" (the number changes)
</span><span class="cx" style="display: block; padding: 0 10px"> // to avoid creating empty posts (without comments).
</span><span class="cx" style="display: block; padding: 0 10px"> function createShadowPost( formdata, submitComment ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var data = {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const data = {
</ins><span class="cx" style="display: block; padding: 0 10px"> action: 'create_shadow_post',
</span><span class="cx" style="display: block; padding: 0 10px"> data: formdata,
</span><span class="cx" style="display: block; padding: 0 10px"> _ajax_nonce: wpApiSettings.nonce,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -67,7 +67,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> {
</span><span class="cx" style="display: block; padding: 0 10px"> type: 'POST',
</span><span class="cx" style="display: block; padding: 0 10px"> url: wpApiSettings.admin_ajax_url,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- data: data,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ data,
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> ).done(
</span><span class="cx" style="display: block; padding: 0 10px"> function( response ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -79,17 +79,17 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Sends the new comment or the reply to an existing comment.
</span><span class="cx" style="display: block; padding: 0 10px"> $gp.editor.table.on( 'submit', '.meta.discussion .comment-form', function( e ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var $commentform = $( e.target );
- var postId = $commentform.attr( 'id' ).split( '-' )[ 1 ];
- var divDiscussion = $commentform.closest( '.meta.discussion' );
- var rowId = divDiscussion.attr( 'data-row-id' );
- var requestUrl = $gp_translation_helpers_editor.translation_helper_url + rowId + '?nohc';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const $commentform = $( e.target );
+ const postId = $commentform.attr( 'id' ).split( '-' )[ 1 ];
+ const divDiscussion = $commentform.closest( '.meta.discussion' );
+ const rowId = divDiscussion.attr( 'data-row-id' );
+ const requestUrl = $gp_translation_helpers_editor.translation_helper_url + rowId + '?nohc';
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var submitComment = function( formdata ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const submitComment = function( formdata ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> $.ajax( {
</span><span class="cx" style="display: block; padding: 0 10px"> url: wpApiSettings.root + 'wp/v2/comments',
</span><span class="cx" style="display: block; padding: 0 10px"> method: 'POST',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- beforeSend: function( xhr ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ beforeSend( xhr ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce );
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px"> data: formdata,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -107,7 +107,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var formdata = {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const formdata = {
</ins><span class="cx" style="display: block; padding: 0 10px"> content: $commentform.find( 'textarea[name=comment]' ).val(),
</span><span class="cx" style="display: block; padding: 0 10px"> parent: $commentform.find( 'input[name=comment_parent]' ).val(),
</span><span class="cx" style="display: block; padding: 0 10px"> post: postId,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -147,11 +147,11 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Copies the translation from another language to the current translation.
</span><span class="cx" style="display: block; padding: 0 10px"> $gp.editor.table.on( 'click', 'button.sidebar-other-locales', function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var textToCopy = $( this ).closest( 'li' ).find( 'a' ).text();
- var textareaToPaste = $( this ).closest( '.editor' ).find( 'textarea.foreign-text' );
- var selectionStart = textareaToPaste.get( 0 ).selectionStart;
- var selectionEnd = textareaToPaste.get( 0 ).selectionEnd;
- var textToCopyLength = textToCopy.length;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const textToCopy = $( this ).closest( 'li' ).find( 'a' ).text();
+ const textareaToPaste = $( this ).closest( '.editor' ).find( 'textarea.foreign-text' );
+ let selectionStart = textareaToPaste.get( 0 ).selectionStart;
+ let selectionEnd = textareaToPaste.get( 0 ).selectionEnd;
+ const textToCopyLength = textToCopy.length;
</ins><span class="cx" style="display: block; padding: 0 10px"> textareaToPaste.val( textareaToPaste.val().substring( 0, selectionStart ) +
</span><span class="cx" style="display: block; padding: 0 10px"> textToCopy +
</span><span class="cx" style="display: block; padding: 0 10px"> textareaToPaste.val().substring( selectionEnd, textareaToPaste.val().length ) );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -167,7 +167,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // have a row, because GlotPress opens the first editor if the current
</span><span class="cx" style="display: block; padding: 0 10px"> // table has only one, so with the double click we load the content sidebar.
</span><span class="cx" style="display: block; padding: 0 10px"> // eslint-disable-next-line vars-on-top
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var previewRows = $gp.editor.table.find( 'tr.preview' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const previewRows = $gp.editor.table.find( 'tr.preview' );
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( 1 === previewRows.length ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $( 'tr.preview td' ).trigger( 'dblclick' );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -178,7 +178,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {Object} tab The selected tab.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> function change_visible_tab( tab ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var tabId = tab.attr( 'data-tab' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const tabId = tab.attr( 'data-tab' );
</ins><span class="cx" style="display: block; padding: 0 10px"> tab.siblings().removeClass( 'current' );
</span><span class="cx" style="display: block; padding: 0 10px"> tab.parents( '.sidebar-tabs ' ).find( '.helper' ).removeClass( 'current' );
</span><span class="cx" style="display: block; padding: 0 10px"> tab.addClass( 'current' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -206,9 +206,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {string} sidebarDiv The div where we add the buttons.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> function add_copy_button( sidebarDiv ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var lis = $( sidebarDiv + ' .other-locales li' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const lis = $( sidebarDiv + ' .other-locales li' );
</ins><span class="cx" style="display: block; padding: 0 10px"> lis.each( function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var html = $( this ).html();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ let html = $( this ).html();
</ins><span class="cx" style="display: block; padding: 0 10px"> html += '<button class="sidebar-other-locales button is-small copy-suggestion"> Copy </button>';
</span><span class="cx" style="display: block; padding: 0 10px"> $( this ).html( html );
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -220,8 +220,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {Object} element The element that triggers the action.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> function loadTabsAndDivs( element ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var originalId = element.closest( 'tr' ).attr( 'id' ).substring( 7 );
- var requestUrl = $gp_translation_helpers_editor.translation_helper_url + originalId + '?nohc';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const originalId = element.closest( 'tr' ).attr( 'id' ).substring( 7 );
+ const requestUrl = $gp_translation_helpers_editor.translation_helper_url + originalId + '?nohc';
</ins><span class="cx" style="display: block; padding: 0 10px"> $.getJSON( requestUrl, function( data ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $( '[data-tab="sidebar-tab-discussion-' + originalId + '"]' ).html( 'Discussion (' + data[ 'helper-translation-discussion-' + originalId ].count + ')' );
</span><span class="cx" style="display: block; padding: 0 10px"> $( '#sidebar-div-discussion-' + originalId ).html( data[ 'helper-translation-discussion-' + originalId ].content );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -233,19 +233,213 @@
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function EventStreamParser( onParse ) {
+ // npm eventsource-parser
+ // MIT License
+ // Copyright (c) 2023 Espen Hovlandsdal <espen@hovlandsdal.com>
+
+ // Processing state
+ let isFirstChunk;
+ let buffer;
+ let startingPosition;
+ let startingFieldLength;
+
+ // Event state
+ let eventId;
+ let eventName;
+ let data;
+
+ reset();
+ return { feed, reset };
+
+ function reset() {
+ isFirstChunk = true;
+ buffer = '';
+ startingPosition = 0;
+ startingFieldLength = -1;
+
+ eventId = undefined;
+ eventName = undefined;
+ data = '';
+ }
+
+ function feed( chunk ) {
+ buffer = buffer ? buffer + chunk : chunk;
+
+ // Strip any UTF8 byte order mark (BOM) at the start of the stream.
+ // Note that we do not strip any non - UTF8 BOM, as eventsource streams are
+ // always decoded as UTF8 as per the specification.
+ if ( isFirstChunk && hasBom( buffer ) ) {
+ buffer = buffer.slice( 3 );
+ }
+
+ isFirstChunk = false;
+
+ // Set up chunk-specific processing state
+ const length = buffer.length;
+ let position = 0;
+ let discardTrailingNewline = false;
+
+ // Read the current buffer byte by byte
+ while ( position < length ) {
+ // EventSource allows for carriage return + line feed, which means we
+ // need to ignore a linefeed character if the previous character was a
+ // carriage return
+ // @todo refactor to reduce nesting, consider checking previous byte?
+ // @todo but consider multiple chunks etc
+ if ( discardTrailingNewline ) {
+ if ( buffer[ position ] === '\n' ) {
+ ++position;
+ }
+ discardTrailingNewline = false;
+ }
+
+ let lineLength = -1;
+ let fieldLength = startingFieldLength;
+ let character;
+
+ for ( let index = startingPosition; lineLength < 0 && index < length; ++index ) {
+ character = buffer[ index ];
+ if ( character === ':' && fieldLength < 0 ) {
+ fieldLength = index - position;
+ } else if ( character === '\r' ) {
+ discardTrailingNewline = true;
+ lineLength = index - position;
+ } else if ( character === '\n' ) {
+ lineLength = index - position;
+ }
+ }
+
+ if ( lineLength < 0 ) {
+ startingPosition = length - position;
+ startingFieldLength = fieldLength;
+ break;
+ } else {
+ startingPosition = 0;
+ startingFieldLength = -1;
+ }
+
+ parseEventStreamLine( buffer, position, fieldLength, lineLength );
+
+ position += lineLength + 1;
+ }
+
+ if ( position === length ) {
+ // If we consumed the entire buffer to read the event, reset the buffer
+ buffer = '';
+ } else if ( position > 0 ) {
+ // If there are bytes left to process, set the buffer to the unprocessed
+ // portion of the buffer only
+ buffer = buffer.slice( position );
+ }
+ }
+
+ function parseEventStreamLine(
+ lineBuffer,
+ index,
+ fieldLength,
+ lineLength
+ ) {
+ if ( lineLength === 0 ) {
+ // We reached the last line of this event
+ if ( data.length > 0 ) {
+ onParse( {
+ type: 'event',
+ id: eventId,
+ event: eventName || undefined,
+ data: data.slice( 0, -1 ), // remove trailing newline
+ } );
+
+ data = '';
+ eventId = undefined;
+ }
+ eventName = undefined;
+ return;
+ }
+
+ const noValue = fieldLength < 0;
+ const field = lineBuffer.slice( index, index + ( noValue ? lineLength : fieldLength ) );
+ let step = 0;
+
+ if ( noValue ) {
+ step = lineLength;
+ } else if ( lineBuffer[ index + fieldLength + 1 ] === ' ' ) {
+ step = fieldLength + 2;
+ } else {
+ step = fieldLength + 1;
+ }
+
+ const position = index + step;
+ const valueLength = lineLength - step;
+ const value = lineBuffer.slice( position, position + valueLength ).toString();
+
+ if ( field === 'data' ) {
+ data += value ? `${ value }\n` : '\n';
+ } else if ( field === 'event' ) {
+ eventName = value;
+ } else if ( field === 'id' && ! value.includes( '\u0000' ) ) {
+ eventId = value;
+ } else if ( field === 'retry' ) {
+ const retry = parseInt( value, 10 );
+ if ( ! Number.isNaN( retry ) ) {
+ onParse( { type: 'reconnect-interval', value: retry } );
+ }
+ }
+ }
+ function hasBom( b ) {
+ return [ 239, 187, 191 ].every( ( charCode, index ) => b.charCodeAt( index ) === charCode );
+ }
+ }
+
+ async function invokeChatGPT( prompt, response_span ) {
+ const request = {
+ model: 'gpt-3.5-turbo',
+ messages: prompt,
+ temperature: parseFloat( $gp_comment_feedback_settings.openai_temperature ),
+ stream: true,
+ };
+ let result = '';
+ const parser = EventStreamParser( function( event ) {
+ if ( event.type === 'event' ) {
+ if ( event.data !== '[DONE]' ) {
+ result += JSON.parse( event.data ).choices[ 0 ].delta.content || '';
+ response_span.text( result );
+ }
+ } else if ( event.type === 'invalid_request_error' ) {
+ response_span.text( event.value );
+ } else if ( event.type === 'reconnect-interval' ) {
+ console.log( 'We should set reconnect interval to %d milliseconds', event.value );
+ }
+ } );
+
+ let response = await fetch(
+ 'https://api.openai.com/v1/chat/completions',
+ {
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${ $gp_comment_feedback_settings.openai_key }`,
+ },
+ method: 'POST',
+ body: JSON.stringify( request ),
+ }
+ );
+
+ for await (const value of response.body?.pipeThrough(new TextDecoderStream())) {
+ parser.feed(value)
+ }
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Fetch translation review from OpenAI.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {string} rowId The row-id attribute of the current row.
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {string} currentRow The current row.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @param {boolean} isRetry The current row.
</del><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> function fetchOpenAIReviewResponse( rowId, currentRow, isRetry ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var payload = {};
- var data = {};
- var original_str = currentRow.find( '.original' );
- var glossary_prompt = '';
- var translation = currentRow.find( '.foreign-text:first' ).val();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const messages = [];
+ const original_str = currentRow.find( '.original' );
+ let glossary_prompt = '';
+ let result = '';
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $.each( $( original_str ).find( '.glossary-word' ), function( k, word ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $.each( $( word ).data( 'translations' ), function( i, e ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -258,44 +452,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( '' !== glossary_prompt ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- glossary_prompt = 'You are required to follow these rules, ' + glossary_prompt + 'for words found in the English text you are translating.';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ messages.push( {
+ role: 'system',
+ content: 'You are required to follow these rules, ' + glossary_prompt + 'for words found in the English text you are translating.',
+ } );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- payload.language = $gp_comment_feedback_settings.language;
- payload.original = currentRow.find( '.original-raw' ).text();
- payload.translation = translation;
- payload.glossary_query = glossary_prompt;
- payload.is_retry = isRetry;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ messages.push( {
+ role: 'system',
+ content: ( isRetry ? 'Are you sure that ' : '' ) + 'For the english text "' + currentRow.find( '.original-raw' ).text() + '", is "' + currentRow.find( '.foreign-text:first' ).val() + '" a correct translation in ' + $gp_comment_feedback_settings.language + '? Don\'t repeat the translation if it is correct and point out differences if there are any.',
+ } );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- data = {
- action: 'fetch_openai_review',
- data: payload,
- _ajax_nonce: $gp_comment_feedback_settings.nonce,
- };
-
- $.ajax(
- {
- type: 'POST',
- url: typeof window.useThinFetch !== 'undefined' && window.useThinFetch ? '/wp-content/plugins/wporg-gp-translation-suggestions/ajax-fetch-openai-review.php' : $gp_comment_feedback_settings.url,
- data: data,
- }
- ).done(
- function( response ) {
- currentRow.find( '.openai-review .suggestions__loading-indicator' ).hide();
- if ( response.success ) {
- currentRow.find( '.openai-review .auto-review-result' ).html( '<h4>Review by ChatGPT' ).append( $( '<span/>' ).text( response.data.review + ' (' + response.data.time_taken.toFixed( 2 ) + 's)' ) );
- } else if ( 404 === response.data.status ) {
- currentRow.find( '.openai-review' ).hide();
- return;
- } else {
- currentRow.find( '.openai-review .auto-review-result' ).text( 'Error ' + response.data.status + ' : ' + response.data.error );
- }
- currentRow.find( '.openai-review .auto-review-result' ).append( ' <a href="#" class="retry-auto-review">Retry</a>' );
- }
- ).fail(
- function( xhr, msg ) {
- /* eslint no-console: ["error", { allow: ["error"] }] */
- console.error( data );
- }
- );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ currentRow.find( '.openai-review .suggestions__loading-indicator' ).hide();
+ currentRow.find( '.openai-review .auto-review-result' ).html( '<h4>Review by ChatGPT' ).append( '<span style="white-space: pre-line">' );
+ invokeChatGPT( messages, currentRow.find( '.openai-review .auto-review-result span' ) ).then(()=>currentRow.find( '.openai-review .auto-review-result' ).append( ' <a href="#" class="retry-auto-review">Retry</a>' ));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span></span></pre>
</div>
</div>
</body>
</html>