Merge pull request #3456 from SillyTavern/mobile-prompt-itemization Allow mobile to access the "Raw Prompt" in Prompt Itemization

c7958a4bb8048042c3ac8df9d8b2c8b2bc360012

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed

public/css/mobile-styles.css+0 -2 Viewed

+    }
-    #showRawPrompt,
-    #copyPromptToClipboard,
     #groupCurrentMemberPopoutButton,
     #summaryExtensionPopoutButton {
         display: none;

public/css/popup.css+4 -0 Viewed

     overflow-x: auto;
+}
+.popup.left_aligned_dialogue_popup .popup-content {
+    text-align: start;
+}
 /* Opening animation */
 .popup[opening] {
     animation: pop-in var(--popup-animation-speed) ease-in-out;

public/script.js+12 -1 Viewed

         toastr.info(t`Copied!`);
     });
-    popup.dlg.querySelector('#showRawPrompt').addEventListener('click', function () {
+    popup.dlg.querySelector('#showRawPrompt').addEventListener('click', async function () {
         //console.log(itemizedPrompts[PromptArrayItemForRawPromptDisplay].rawPrompt);
         console.log(PromptArrayItemForRawPromptDisplay);
         console.log(itemizedPrompts);

         const rawPrompt = flatten(itemizedPrompts[PromptArrayItemForRawPromptDisplay].rawPrompt);
+        // Mobile needs special handholding. The side-view on the popup wouldn't work,
+        // so we just show an additional popup for this.
+        if (isMobile()) {
+            const content = document.createElement('div');
+            content.classList.add('tokenItemizingMaintext');
+            content.innerText = rawPrompt;
+            const popup = new Popup(content, POPUP_TYPE.TEXT, null, { allowVerticalScrolling: true, leftAlign: true });
+            await popup.show();
+            return;
+        }
         //let DisplayStringifiedPrompt = JSON.stringify(itemizedPrompts[PromptArrayItemForRawPromptDisplay].rawPrompt).replace(/\n+/g, '<br>');
         const rawPromptWrapper = document.getElementById('rawPromptWrapper');
         rawPromptWrapper.innerText = rawPrompt;

public/scripts/popup.js+3 -1 Viewed

  * @property {boolean?} [transparent=false] - Whether to display the popup in transparent mode (no background, border, shadow or anything, only its content)
  * @property {boolean?} [allowHorizontalScrolling=false] - Whether to allow horizontal scrolling in the popup
  * @property {boolean?} [allowVerticalScrolling=false] - Whether to allow vertical scrolling in the popup
+ * @property {boolean?} [leftAlign=false] - Whether the popup content should be left-aligned by default
  * @property {'slow'|'fast'|'none'?} [animation='slow'] - Animation speed for the popup (opening, closing, ...)
  * @property {POPUP_RESULT|number?} [defaultResult=POPUP_RESULT.AFFIRMATIVE] - The default result of this popup when Enter is pressed. Can be changed from `POPUP_RESULT.AFFIRMATIVE`.
  * @property {CustomPopupButton[]|string[]?} [customButtons=null] - Custom buttons to add to the popup. If only strings are provided, the buttons will be added with default options, and their result will be in order from `2` onward.

      * @param {string} [inputValue=''] - The initial value of the input field
      * @param {PopupOptions} [options={}] - Additional options for the popup
      */
-    constructor(content, type, inputValue = '', { okButton = null, cancelButton = null, rows = 1, wide = false, wider = false, large = false, transparent = false, allowHorizontalScrolling = false, allowVerticalScrolling = false, animation = 'fast', defaultResult = POPUP_RESULT.AFFIRMATIVE, customButtons = null, customInputs = null, onClosing = null, onClose = null, cropAspect = null, cropImage = null } = {}) {
+    constructor(content, type, inputValue = '', { okButton = null, cancelButton = null, rows = 1, wide = false, wider = false, large = false, transparent = false, allowHorizontalScrolling = false, allowVerticalScrolling = false, leftAlign = false, animation = 'fast', defaultResult = POPUP_RESULT.AFFIRMATIVE, customButtons = null, customInputs = null, onClosing = null, onClose = null, cropAspect = null, cropImage = null } = {}) {
         Popup.util.popups.push(this);
         // Make this popup uniquely identifiable

         if (transparent) this.dlg.classList.add('transparent_dialogue_popup');
         if (allowHorizontalScrolling) this.dlg.classList.add('horizontal_scrolling_dialogue_popup');
         if (allowVerticalScrolling) this.dlg.classList.add('vertical_scrolling_dialogue_popup');
+        if (leftAlign) this.dlg.classList.add('left_aligned_dialogue_popup');
         if (animation) this.dlg.classList.add('popup--animation-' + animation);
         // If custom button captions are provided, we set them beforehand

public/scripts/templates/itemizationChat.html+1 -1 Viewed

 </div>
 <hr>
 <div id="rawPromptPopup" class="list-group">
-    <div id="rawPromptWrapper" class="tokenItemizingSubclass"></div>
+    <div id="rawPromptWrapper" class="tokenItemizingMaintext"></div>
 </div>

public/style.css+4 -0 Viewed

     color: var(--SmartThemeEmColor);
+}
+.tokenItemizingMaintext {
+    font-size: calc(var(--mainFontSize) * 0.8);
+}
 .tokenGraph {
     border-radius: 10px;
     border: 1px solid var(--SmartThemeBorderColor);