diff --git a/lms/static/js/edxnotes/plugins/llm_summarize.js b/lms/static/js/edxnotes/plugins/llm_summarize.js new file mode 100644 index 000000000000..6f812511118b --- /dev/null +++ b/lms/static/js/edxnotes/plugins/llm_summarize.js @@ -0,0 +1,84 @@ +(function(define, undefined) { + 'use strict'; + define(['jquery', 'annotator_1.2.9'], function($, Annotator) { + /** + * LlmSummarize plugin adds a button to the annotatorjs adder in order to + * summarize the text selected and save as annotation. + **/ + Annotator.Plugin.LlmSummarize = function() { + Annotator.Plugin.apply(this, arguments); + }; + + $.extend(Annotator.Plugin.LlmSummarize.prototype, new Annotator.Plugin(), { + pluginInit: function() { + // Overrides of annotatorjs HTML/CSS to add summarize button. + var style = document.createElement('style'); + style.innerHTML = ` + .annotator-adder::before { + content: ''; + width: 10px; + height: 10px; + background-color: white; + display: block; + position: absolute; + top: 100%; + left: 5px; + border-bottom: 1px solid gray; + border-right: 1px solid gray; + z-index: 0; + transform: translateY(-50%) rotate(45deg); + } + + .annotator-adder button::before, + .annotator-adder button::after { + display: none !important; + } + + .annotator-adder #annotateButton, + .annotator-adder #summarizeButton { + border: none !important; + background: rgb(0, 48, 87) !important; + box-shadow: none !important; + width: initial; + transition: color .1s; + text-indent: initial; + font-size: 20px; + padding: 0; + height: fit-content; + color: white; + border-radius: 5px; + padding-left: 5px; + padding-right: 5px; + font-weight: normal; + display: inline-block; + } + + .annotator-adder #summarizeButton { + margin-left: 3px; + } + + .annotator-adder button i.fa { + font-style: normal; + } + + .annotator-adder { + width: fit-content; + height: fit-content; + padding: 5px; + background-color: white; + border: 1px solid gray; + } + `; + document.head.appendChild(style); + var annotator = this.annotator; + annotator.adder[0].children[0].id = 'annotateButton'; + annotator.adder[0].children[0].innerHTML = ''; + annotator.adder[0].innerHTML += ` + + `; + }, + }); + }); +}).call(this, define || RequireJS.define); diff --git a/lms/static/js/edxnotes/views/notes_factory.js b/lms/static/js/edxnotes/views/notes_factory.js index 5c98bc7683b7..8d8b5b1dcfec 100644 --- a/lms/static/js/edxnotes/views/notes_factory.js +++ b/lms/static/js/edxnotes/views/notes_factory.js @@ -7,9 +7,10 @@ 'js/edxnotes/plugins/events', 'js/edxnotes/plugins/accessibility', 'js/edxnotes/plugins/caret_navigation', 'js/edxnotes/plugins/store_error_handler', - 'js/edxnotes/plugins/search_override' + 'js/edxnotes/plugins/search_override', + 'js/edxnotes/plugins/llm_summarize', ], function($, _, Annotator, NotesLogger, NotesCollector) { - var plugins = ['Auth', 'Store', 'Scroller', 'Events', 'Accessibility', 'CaretNavigation', 'Tags'], + var plugins = ['Auth', 'Store', 'Scroller', 'Events', 'Accessibility', 'CaretNavigation', 'Tags', 'LlmSummarize'], getOptions, setupPlugins, getAnnotator; /**