diff --git a/public/css/mobile-styles.css b/public/css/mobile-styles.css
index a5c8b3176..56c89e275 100644
--- a/public/css/mobile-styles.css
+++ b/public/css/mobile-styles.css
@@ -216,8 +216,6 @@
}
- #showRawPrompt,
- #copyPromptToClipboard,
#groupCurrentMemberPopoutButton,
#summaryExtensionPopoutButton {
display: none;
diff --git a/public/css/popup.css b/public/css/popup.css
index 545f7014a..e477bfd75 100644
--- a/public/css/popup.css
+++ b/public/css/popup.css
@@ -72,6 +72,10 @@ dialog {
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;
diff --git a/public/script.js b/public/script.js
index b5b161555..e848b2cd7 100644
--- a/public/script.js
+++ b/public/script.js
@@ -5577,7 +5577,7 @@ async function promptItemize(itemizedPrompts, requestedMesId) {
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);
@@ -5585,6 +5585,17 @@ async function promptItemize(itemizedPrompts, requestedMesId) {
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, '
');
const rawPromptWrapper = document.getElementById('rawPromptWrapper');
rawPromptWrapper.innerText = rawPrompt;
diff --git a/public/scripts/popup.js b/public/scripts/popup.js
index b6dd110f6..aaadce1b1 100644
--- a/public/scripts/popup.js
+++ b/public/scripts/popup.js
@@ -46,6 +46,7 @@ export const POPUP_RESULT = {
* @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.
@@ -173,7 +174,7 @@ export class Popup {
* @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
@@ -218,6 +219,7 @@ export class Popup {
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
diff --git a/public/scripts/templates/itemizationChat.html b/public/scripts/templates/itemizationChat.html
index 4a699e799..f78079ee6 100644
--- a/public/scripts/templates/itemizationChat.html
+++ b/public/scripts/templates/itemizationChat.html
@@ -146,5 +146,5 @@