chore: build and documentation for release

xability · Mar 7, 2024 · 243ba5f · 243ba5f
1 parent 01f42d0
commit 243ba5f
Show file tree

Hide file tree

Showing 47 changed files with 403 additions and 145 deletions.
diff --git a/dist/maidr.js b/dist/maidr.js
@@ -273,6 +273,7 @@ class Resources {
         openai: 'OpenAI Vision',
         gemini: 'Gemini Pro Vision',
         multi: 'Multiple AI',
+        processing: 'Processing Chart...',
       },
     },
   };
@@ -443,7 +444,7 @@ class Menu {
                         </div>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" id="save_and_close_menu">Save and Close</button>
+                        <button type="button" id="save_and_close_menu" aria-labelledby="save_and_close_text"><span id="save_and_close_text">Save and Close</span></button>
                         <button type="button" id="close_menu">Close</button>
                     </div>
                 </div>
@@ -579,6 +580,16 @@ class Menu {
         }
       },
     ]);
+
+    // trigger notification that LLM will be reset
+    // this is done on change of LLM model, multi settings, or skill level
+    constants.events.push([
+      document.getElementById('LLM_model'),
+      'change',
+      function (e) {
+        menu.NotifyOfLLMReset();
+      },
+    ]);
   }
 
   /**
@@ -720,6 +731,9 @@ class Menu {
       document.getElementById('LLM_preferences').value =
         constants.LLMPreferences;
     }
+    if (document.getElementById('LLM_reset_notification')) {
+      document.getElementById('LLM_reset_notification').remove();
+    }
   }
 
   /**
@@ -777,6 +791,24 @@ class Menu {
       .setAttribute('aria-live', constants.ariaMode);
   }
 
+  /**
+   * Notifies the user that the LLM will be reset.
+   */
+  NotifyOfLLMReset() {
+    let html =
+      '<p id="LLM_reset_notification">Note: Changes in LLM settings will reset any existing conversation.</p>';
+    document
+      .getElementById('save_and_close_menu')
+      .insertAdjacentHTML('beforebegin', html);
+
+    // add to aria button text
+    document
+      .getElementById('save_and_close_menu')
+      .setAttribute(
+        'aria-labelledby',
+        'save_and_close_text LLM_reset_notification'
+      );
+  }
   /**
    * Handles changes to the LLM model and multi-modal settings.
    * We reset if we change the LLM model, multi settings, or skill level.
@@ -895,8 +927,11 @@ class ChatLLM {
                         </button>
                     </div>
                     <div class="modal-body">
+                        <div id="chatLLM_chat_history_wrapper">
                         <div id="chatLLM_chat_history" aria-live="${constants.ariaMode}" aria-relevant="additions">
                         </div>
+                        <p id="chatLLM_copy_all_wrapper"><button id="chatLLM_copy_all">Copy all to clipboard</button></p>
+                        </div>
                         <div id="chatLLM_content">
                           <p><input type="text" id="chatLLM_input" class="form-control" name="chatLLM_input" aria-labelledby="chatLLM_title" size="50"></p>
                           <div class="LLM_suggestions">
@@ -1038,10 +1073,41 @@ class ChatLLM {
       document.getElementById('reset_chatLLM'),
       'click',
       function (e) {
-        chatLLM.Toggle(false);
         chatLLM.ResetChatHistory();
       },
     ]);
+
+    // copy to clipboard
+    constants.events.push([
+      document.getElementById('chatLLM_copy_all'),
+      'click',
+      function (e) {
+        let text = document.getElementById('chatLLM_chat_history').innerText;
+        // need newlines instead of paragraphs headings etc
+        text = text.replace(/<p>/g, '\n').replace(/<\/p>/g, '\n');
+        text = text.replace(/<h\d>/g, '\n').replace(/<\/h\d>/g, '\n');
+        text = text.replace(/<.*?>/g, '');
+
+        navigator.clipboard.writeText(text);
+      },
+    ]);
+    constants.events.push([
+      document.getElementById('chatLLM_chat_history'),
+      'click',
+      function (e) {
+        // we're delegating here, so set the event on child .chatLLM_message_copy_button
+        if (e.target.matches('.chatLLM_message_copy_button')) {
+          // get the innerText of the element before the button
+          let text = e.target.closest('p').previousElementSibling.innerText;
+          // need newlines instead of paragraphs headings etc
+          text = text.replace(/<p>/g, '\n').replace(/<\/p>/g, '\n');
+          text = text.replace(/<h\d>/g, '\n').replace(/<\/h\d>/g, '\n');
+          text = text.replace(/<.*?>/g, '');
+
+          navigator.clipboard.writeText(text);
+        }
+      },
+    ]);
   }
 
   /**
@@ -1122,7 +1188,7 @@ class ChatLLM {
    */
   ProcessLLMResponse(data, model) {
     chatLLM.WaitingSound(false);
-    console.log('LLM response: ', data);
+    //console.log('LLM response: ', data);
     let text = '';
     let LLMName = resources.GetString(model);
 
@@ -1326,9 +1392,9 @@ class ChatLLM {
       };
 
       // Generate the content
-      console.log('LLM request: ', prompt, image);
+      //console.log('LLM request: ', prompt, image);
       const result = await model.generateContent([prompt, image]);
-      console.log(result.response.text());
+      //console.log(result.response.text());
 
       // Process the response
       chatLLM.ProcessLLMResponse(result.response, 'gemini');
@@ -1368,6 +1434,12 @@ class ChatLLM {
         <p class="chatLLM_message_text">${text}</p>
       </div>
     `;
+    // add a copy button to actual messages
+    if (user != 'User' && text != resources.GetString('processing')) {
+      html += `
+        <p class="chatLLM_message_copy"><button class="chatLLM_message_copy_button">Copy</button></p>
+      `;
+    }
 
     this.RenderChatMessage(html);
   }
@@ -1445,7 +1517,11 @@ class ChatLLM {
         // get name from resource
         let LLMName = resources.GetString(constants.LLMModel);
         this.firstTime = false;
-        this.DisplayChatMessage(LLMName, 'Processing Chart...', true);
+        this.DisplayChatMessage(
+          LLMName,
+          resources.GetString('processing'),
+          true
+        );
         let defaultPrompt = this.GetDefaultPrompt();
         this.Submit(defaultPrompt, true);
       }

diff --git a/dist/maidr.min.js b/dist/maidr.min.js
diff --git a/dist/maidr_style.css b/dist/maidr_style.css
@@ -287,15 +287,24 @@ textarea {
 
 /* LLM stuff */
 
-#chatLLM_chat_history {
+#chatLLM_chat_history_wrapper {
+  position: relative;
   height: 100%;
   min-height: 400px;
   max-height: 450px;
-  overflow-y: auto;
   padding: 0.5rem;
   background-color: #fff;
-  border: 1px solid #dee2e6;
+}
+
+#chatLLM_chat_history {
+  overflow-y: auto;
+  height: 100%;
+  min-height: 400px;
+  max-height: 450px;
+  padding: 0.5rem;
+  padding-bottom: 4rem;
   border-radius: 0.25rem;
+  border: 1px solid #dee2e6;
   display: flex;
   flex-direction: column;
   align-items: column;
@@ -319,12 +328,26 @@ textarea {
   align-self: flex-start;
 }
 
-.LLM_suggestions > p > button {
+.LLM_suggestions > p > button,
+#chatLLM_copy_all {
   font-weight: normal;
   border-radius: 0.5rem;
   border: none;
 }
 
 .LLM_suggestions > p {
   display: inline-block;
+}
+
+/* align this to the lower right of the chat history */
+
+#chatLLM_copy_all_wrapper {
+  position: absolute;
+  bottom: -0.5rem;
+  right: 1.5rem;
+  margin: 0.5rem;
+}
+
+.chatLLM_message_copy_button {
+  font-weight: normal;
 }
diff --git a/dist/maidr_style.min.css b/dist/maidr_style.min.css
diff --git a/docs/Audio.html b/docs/Audio.html
diff --git a/docs/BarChart.html b/docs/BarChart.html
diff --git a/docs/BoxPlot.html b/docs/BoxPlot.html
diff --git a/docs/BoxplotRect.html b/docs/BoxplotRect.html
diff --git a/docs/ChatLLM.html b/docs/ChatLLM.html
diff --git a/docs/Constants.html b/docs/Constants.html
diff --git a/docs/Constants_ConvertHexToRGBString.html b/docs/Constants_ConvertHexToRGBString.html
diff --git a/docs/Constants_ConvertRGBStringToHex.html b/docs/Constants_ConvertRGBStringToHex.html
diff --git a/docs/Constants_GetStyleArrayFromString.html b/docs/Constants_GetStyleArrayFromString.html
diff --git a/docs/Constants_GetStyleStringFromArray.html b/docs/Constants_GetStyleStringFromArray.html
diff --git a/docs/Control.html b/docs/Control.html
diff --git a/docs/Description.html b/docs/Description.html
diff --git a/docs/Display.html b/docs/Display.html
diff --git a/docs/HeatMap.html b/docs/HeatMap.html
diff --git a/docs/HeatMapRect.html b/docs/HeatMapRect.html
diff --git a/docs/Helper.html b/docs/Helper.html
diff --git a/docs/Histogram.html b/docs/Histogram.html
diff --git a/docs/Layer0Point.html b/docs/Layer0Point.html
diff --git a/docs/Layer1Point.html b/docs/Layer1Point.html
diff --git a/docs/LinePlot.html b/docs/LinePlot.html
diff --git a/docs/LogError.html b/docs/LogError.html
diff --git a/docs/Menu.html b/docs/Menu.html
diff --git a/docs/Point.html b/docs/Point.html
diff --git a/docs/Position.html b/docs/Position.html
diff --git a/docs/Resources.html b/docs/Resources.html
diff --git a/docs/Review.html b/docs/Review.html
diff --git a/docs/ScatterPlot.html b/docs/ScatterPlot.html
diff --git a/docs/Segmented.html b/docs/Segmented.html
diff --git a/docs/Tracker.html b/docs/Tracker.html
diff --git a/docs/audio.js.html b/docs/audio.js.html
diff --git a/docs/barplot.js.html b/docs/barplot.js.html
diff --git a/docs/boxplot.js.html b/docs/boxplot.js.html
diff --git a/docs/constants.js.html b/docs/constants.js.html
diff --git a/docs/controls.js.html b/docs/controls.js.html
diff --git a/docs/display.js.html b/docs/display.js.html
diff --git a/docs/global.html b/docs/global.html
diff --git a/docs/heatmap.js.html b/docs/heatmap.js.html
diff --git a/docs/histogram.js.html b/docs/histogram.js.html
diff --git a/docs/index.html b/docs/index.html
diff --git a/docs/init.js.html b/docs/init.js.html
diff --git a/docs/lineplot.js.html b/docs/lineplot.js.html
diff --git a/docs/scatterplot.js.html b/docs/scatterplot.js.html
diff --git a/docs/segmented.js.html b/docs/segmented.js.html