From 2df1983dd3115334c8f1dad811a4ea16d42b09d8 Mon Sep 17 00:00:00 2001
From: Serafin-dev <nicolas.mateoli@edunext.co>
Date: Fri, 25 Oct 2024 10:48:35 -0300
Subject: [PATCH] style: expand annotation textarea and apply responsiveness
 for different devices.

---
 .../js/edxnotes/plugins/llm_summarize.js      | 76 ++++++++++++++++---
 1 file changed, 64 insertions(+), 12 deletions(-)

diff --git a/lms/static/js/edxnotes/plugins/llm_summarize.js b/lms/static/js/edxnotes/plugins/llm_summarize.js
index 2ee1e636746c..ca4e2e16ed92 100644
--- a/lms/static/js/edxnotes/plugins/llm_summarize.js
+++ b/lms/static/js/edxnotes/plugins/llm_summarize.js
@@ -14,6 +14,22 @@
                 // Overrides of annotatorjs HTML/CSS to add summarize button.
                 const style = document.createElement('style');
                 style.innerHTML = `
+                    form.annotator-widget {
+                        width: fit-content;
+                    }
+
+                    @media (max-width: 768px) {
+                        .annotator-invert-x .annotator-widget{
+                            left: 0px !important;
+                        }
+                        .annotator-outer {
+                            left: 10px !important;
+                        }
+                        .annotator-widget textarea{
+                            max-height: 380px;
+                        }
+                    }
+
                     .annotator-adder::before {
                         content: '';
                         width: 10px;
@@ -106,6 +122,8 @@
                     loaderWrapper.classList.toggle('d-none');
                     saveButton.disabled = !saveButton.disabled;
                 }
+
+                const container = document.querySelector('#main');
                 const textAreaWrapper = editor.fields[0].element;
                 const request = new Request('/pearson-core/llm-assistance/api/v0/summarize-text', {
                     method: 'POST',
@@ -122,27 +140,61 @@
                 editor.fields[1].element.children[0].value = 'ai_summary';
                 toggleLoader(editor);
                 fetch(request)
-                    .then((response) => {
-                        toggleLoader();
-                        if (response.ok) return response.json();
-                        throw new Error(gettext('There was an error while summarizing the content.'));
-                    })
-                    .then((data) => {
-                        textAreaWrapper.children[0].value = data.summary;
-                    })
-                    .catch((error) => {
-                        alert(error.message);
-                        editor.hide();
+                .then((response) => {
+                    toggleLoader();
+                    if (response.ok) return response.json();
+                    throw new Error(gettext('There was an error while summarizing the content.'));
+                })
+                .then((data) => {
+                    const annotatorEditor = editor.element[0]
+                    const annotatorForm = annotatorEditor.children[0]
+                    const containerWidth = container.offsetWidth;
+                    const containerPadding = window.getComputedStyle(container).getPropertyValue('padding');
+                    const controlsHeight = annotatorForm.children[1].offsetHeight
+                    const editorLeft = parseInt(annotatorEditor.style.getPropertyValue('left'))
+                    const editorTop = parseInt(annotatorEditor.style.getPropertyValue('top'))
+                    const tagFieldHeight = editor.fields[1].element.offsetHeight
+                    const textArea = textAreaWrapper.children[0]
+
+                    textArea.value = data.summary;
+                    textArea.setAttribute('style', `
+                        background-color: #f7f7f7 !important;
+                        border-radius: 5px;
+                        font-size: 12px !important;
+                        width: ${containerWidth - editorLeft - parseInt(containerPadding)}px !important;
+                        height: auto;
+                        overflow-y: auto;
+                    `);
+
+                    textArea.style.height = `${textArea.scrollHeight}px`;
+
+                    if (annotatorForm.offsetHeight > editorTop){
+                        textArea.style.maxHeight = `${editorTop - controlsHeight - tagFieldHeight - 10}px`;
+                    }
+                    textArea.setAttribute('tabindex', '-1');
+                    textArea.scrollIntoView({behavior: 'smooth', block: 'start'});
+
+                    const resizeObserver = new ResizeObserver(() => {
+                        const containerWidth = container.offsetWidth;
+                        textArea.style.width = `${containerWidth - editorLeft - parseInt(containerPadding)}px`;
                     });
+                    resizeObserver.observe(container);
+                })
+                .catch((error) => {
+                    alert(error.message);
+                    editor.hide();
+                });
             },
             cleanupSummarize: function(editor) {
                 const textAreaWrapper = editor.fields[0].element;
+                const textArea = textAreaWrapper.children[0]
                 const loaderWrapper = document.querySelector('.summarize-loader-wrapper');
 
-                textAreaWrapper.children[0].value = '';
+                textArea.value = '';
                 textAreaWrapper.children[1].value = '';
                 editor.options.isSummarizing = false;
                 loaderWrapper.classList.add('d-none');
+                textArea.removeAttribute('style');
             },
             modifyDom: function(annotator) {
                 const textAreaWrapper = annotator.editor.fields[0].element;