' + tabs.join('') + '
');
-
- // Determine which tab should be active
- let firstTab = '';
- if ($userStats.length > 0) firstTab = 'stats';
- else if (hasInfoOrCharacters) firstTab = 'info-characters';
-
- // Create tab content wrappers
- const $statsTab = $('');
- const $infoCharactersTab = $('');
-
- // Create combined content wrapper for Info and Characters
- const $combinedWrapper = $('');
-
- // Move sections into their respective tabs (detach to preserve event handlers)
- if ($userStats.length > 0) {
- $statsTab.append($userStats.detach());
- $userStats.show();
- }
- if ($infoBox.length > 0) {
- $combinedWrapper.append($infoBox.detach());
- $infoBox.show();
- }
- if ($thoughts.length > 0) {
- $combinedWrapper.append($thoughts.detach());
- $thoughts.show();
- }
-
- // Add combined wrapper to the info-characters tab
- if (hasInfoOrCharacters) {
- $infoCharactersTab.append($combinedWrapper);
- }
-
- // Hide dividers on mobile
- $('.rpg-divider').hide();
-
- // Build mobile tab structure
- const $mobileContainer = $('');
- $mobileContainer.append($tabNav);
-
- // Only append tab content wrappers that have content
- if ($userStats.length > 0) $mobileContainer.append($statsTab);
- if (hasInfoOrCharacters) $mobileContainer.append($infoCharactersTab);
-
- // Insert mobile tab structure at the beginning of content box
- $contentBox.prepend($mobileContainer);
-
- // Handle tab switching
- $tabNav.find('.rpg-mobile-tab').on('click', function() {
- const tabName = $(this).data('tab');
-
- // Update active tab button
- $tabNav.find('.rpg-mobile-tab').removeClass('active');
- $(this).addClass('active');
-
- // Update active tab content
- $mobileContainer.find('.rpg-mobile-tab-content').removeClass('active');
- $mobileContainer.find('[data-tab-content="' + tabName + '"]').addClass('active');
- });
-}
-
-/**
- * Removes mobile tab navigation and restores desktop layout.
- */
-function removeMobileTabs() {
- // Get sections from tabs before removing
- const $userStats = $('#rpg-user-stats').detach();
- const $infoBox = $('#rpg-info-box').detach();
- const $thoughts = $('#rpg-thoughts').detach();
-
- // Remove mobile tab container
- $('.rpg-mobile-container').remove();
-
- // Get dividers
- const $dividerStats = $('#rpg-divider-stats');
- const $dividerInfo = $('#rpg-divider-info');
-
- // Restore original sections to content box in correct order
- const $contentBox = $('.rpg-content-box');
-
- // Re-insert sections in original order
- if ($dividerStats.length) {
- $dividerStats.before($userStats);
- $dividerInfo.before($infoBox);
- $contentBox.append($thoughts);
- } else {
- // Fallback if dividers don't exist
- $contentBox.prepend($thoughts);
- $contentBox.prepend($infoBox);
- $contentBox.prepend($userStats);
- }
-
- // Show sections and dividers
- $userStats.show();
- $infoBox.show();
- $thoughts.show();
- $('.rpg-divider').show();
-}
-
-/**
- * Sets up mobile keyboard handling using Visual Viewport API.
- * Prevents layout squashing when keyboard appears by detecting
- * viewport changes and adding CSS classes for adjustment.
- */
-function setupMobileKeyboardHandling() {
- if (!window.visualViewport) {
- // console.log('[RPG Mobile] Visual Viewport API not supported');
- return;
- }
-
- const $panel = $('#rpg-companion-panel');
- let keyboardVisible = false;
-
- // Listen for viewport resize (keyboard show/hide)
- window.visualViewport.addEventListener('resize', () => {
- // Only handle if panel is open on mobile
- if (!$panel.hasClass('rpg-mobile-open')) return;
-
- const viewportHeight = window.visualViewport.height;
- const windowHeight = window.innerHeight;
-
- // Keyboard visible if viewport significantly smaller than window
- // Using 75% threshold to account for browser UI variations
- const isKeyboardShowing = viewportHeight < windowHeight * 0.75;
-
- if (isKeyboardShowing && !keyboardVisible) {
- // Keyboard just appeared
- keyboardVisible = true;
- $panel.addClass('rpg-keyboard-visible');
- // console.log('[RPG Mobile] Keyboard opened');
- } else if (!isKeyboardShowing && keyboardVisible) {
- // Keyboard just disappeared
- keyboardVisible = false;
- $panel.removeClass('rpg-keyboard-visible');
- // console.log('[RPG Mobile] Keyboard closed');
- }
- });
-}
-
-/**
- * Handles focus on contenteditable fields to ensure they're visible when keyboard appears.
- * Uses smooth scrolling to bring focused field into view with proper padding.
- */
-function setupContentEditableScrolling() {
- const $panel = $('#rpg-companion-panel');
-
- // Use event delegation for all contenteditable fields
- $panel.on('focusin', '[contenteditable="true"]', function(e) {
- const $field = $(this);
-
- // Small delay to let keyboard animate in
- setTimeout(() => {
- // Scroll field into view with padding
- // Using 'center' to ensure field is in middle of viewport
- $field[0].scrollIntoView({
- behavior: 'smooth',
- block: 'center',
- inline: 'nearest'
- });
- }, 300);
- });
-}
-
-/**
- * Sets up the collapse/expand toggle button for side panels.
- */
-function setupCollapseToggle() {
- const $collapseToggle = $('#rpg-collapse-toggle');
- const $panel = $('#rpg-companion-panel');
- const $icon = $collapseToggle.find('i');
-
- $collapseToggle.on('click', function(e) {
- e.preventDefault();
- e.stopPropagation();
-
- const isMobile = window.innerWidth <= 1000;
-
- // On mobile: button toggles panel open/closed (same as desktop behavior)
- if (isMobile) {
- const isOpen = $panel.hasClass('rpg-mobile-open');
- console.log('[RPG Mobile] Collapse toggle clicked. Current state:', {
- isOpen,
- panelClasses: $panel.attr('class'),
- inlineStyles: $panel.attr('style'),
- panelPosition: {
- top: $panel.css('top'),
- bottom: $panel.css('bottom'),
- transform: $panel.css('transform'),
- visibility: $panel.css('visibility')
- }
- });
-
- if (isOpen) {
- // Close panel with animation
- console.log('[RPG Mobile] Closing panel');
- closeMobilePanelWithAnimation();
- } else {
- // Open panel
- console.log('[RPG Mobile] Opening panel');
- $panel.addClass('rpg-mobile-open');
- const $overlay = $('');
- $('body').append($overlay);
-
- // Debug: Check state after animation should complete
- setTimeout(() => {
- console.log('[RPG Mobile] 500ms after opening:', {
- panelClasses: $panel.attr('class'),
- hasOpenClass: $panel.hasClass('rpg-mobile-open'),
- visibility: $panel.css('visibility'),
- transform: $panel.css('transform'),
- display: $panel.css('display'),
- opacity: $panel.css('opacity')
- });
- }, 500);
-
- // Close when clicking overlay
- $overlay.on('click', function() {
- console.log('[RPG Mobile] Overlay clicked - closing panel');
- closeMobilePanelWithAnimation();
- updateCollapseToggleIcon();
- });
- }
-
- // Update icon to reflect new state
- updateCollapseToggleIcon();
-
- console.log('[RPG Mobile] After toggle:', {
- panelClasses: $panel.attr('class'),
- inlineStyles: $panel.attr('style'),
- panelPosition: {
- top: $panel.css('top'),
- bottom: $panel.css('bottom'),
- transform: $panel.css('transform'),
- visibility: $panel.css('visibility')
- },
- gameContainer: {
- opacity: $('.rpg-game-container').css('opacity'),
- visibility: $('.rpg-game-container').css('visibility')
- }
- });
- return;
- }
-
- // Desktop behavior: collapse/expand side panel
- const isCollapsed = $panel.hasClass('rpg-collapsed');
-
- if (isCollapsed) {
- // Expand panel
- $panel.removeClass('rpg-collapsed');
-
- // Update icon based on position
- if ($panel.hasClass('rpg-position-right')) {
- $icon.removeClass('fa-chevron-left').addClass('fa-chevron-right');
- } else if ($panel.hasClass('rpg-position-left')) {
- $icon.removeClass('fa-chevron-right').addClass('fa-chevron-left');
- }
- } else {
- // Collapse panel
- $panel.addClass('rpg-collapsed');
-
- // Update icon based on position
- if ($panel.hasClass('rpg-position-right')) {
- $icon.removeClass('fa-chevron-right').addClass('fa-chevron-left');
- } else if ($panel.hasClass('rpg-position-left')) {
- $icon.removeClass('fa-chevron-left').addClass('fa-chevron-right');
- }
- }
- });
-
- // Set initial icon direction based on panel position
- updateCollapseToggleIcon();
-}
-
-/**
- * Updates the collapse toggle icon direction based on panel position.
- */
-function updateCollapseToggleIcon() {
- const $collapseToggle = $('#rpg-collapse-toggle');
- const $panel = $('#rpg-companion-panel');
- const $icon = $collapseToggle.find('i');
- const isMobile = window.innerWidth <= 1000;
-
- if (isMobile) {
- // Mobile: slides from right, use same icon logic as desktop right panel
- const isOpen = $panel.hasClass('rpg-mobile-open');
- console.log('[RPG Mobile] updateCollapseToggleIcon:', {
- isMobile: true,
- isOpen,
- settingIcon: isOpen ? 'chevron-left' : 'chevron-right'
- });
- if (isOpen) {
- // Panel open - chevron points left (to close/slide back right)
- $icon.removeClass('fa-chevron-down fa-chevron-up fa-chevron-right').addClass('fa-chevron-left');
- } else {
- // Panel closed - chevron points right (to open/slide in from right)
- $icon.removeClass('fa-chevron-down fa-chevron-up fa-chevron-left').addClass('fa-chevron-right');
- }
- } else {
- // Desktop: icon direction based on panel position and collapsed state
- const isCollapsed = $panel.hasClass('rpg-collapsed');
-
- if (isCollapsed) {
- // When collapsed, arrow points inward (to expand)
- if ($panel.hasClass('rpg-position-right')) {
- $icon.removeClass('fa-chevron-right').addClass('fa-chevron-left');
- } else if ($panel.hasClass('rpg-position-left')) {
- $icon.removeClass('fa-chevron-left').addClass('fa-chevron-right');
- }
- } else {
- // When expanded, arrow points outward (to collapse)
- if ($panel.hasClass('rpg-position-right')) {
- $icon.removeClass('fa-chevron-left').addClass('fa-chevron-right');
- } else if ($panel.hasClass('rpg-position-left')) {
- $icon.removeClass('fa-chevron-right').addClass('fa-chevron-left');
- }
- }
- }
-}
-
-/**
- * Updates the visibility of the entire panel.
- */
-function updatePanelVisibility() {
- if (extensionSettings.enabled) {
- $panelContainer.show();
- togglePlotButtons(); // Update plot button visibility
- } else {
- $panelContainer.hide();
- $('#rpg-plot-buttons').hide(); // Hide plot buttons when disabled
- }
-}
-
-/**
- * Clears all extension prompts.
- */
-function clearExtensionPrompts() {
- setExtensionPrompt('rpg-companion-inject', '', extension_prompt_types.IN_CHAT, 0, false);
- setExtensionPrompt('rpg-companion-example', '', extension_prompt_types.IN_CHAT, 0, false);
- setExtensionPrompt('rpg-companion-html', '', extension_prompt_types.IN_CHAT, 0, false);
- setExtensionPrompt('rpg-companion-context', '', extension_prompt_types.IN_CHAT, 1, false);
- // Note: rpg-companion-plot is not cleared here since it's passed via quiet_prompt option
- // console.log('[RPG Companion] Cleared all extension prompts');
-}
-
-/**
- * Updates the visibility of individual sections.
- */
-function updateSectionVisibility() {
- // Show/hide sections based on settings
- $userStatsContainer.toggle(extensionSettings.showUserStats);
- $infoBoxContainer.toggle(extensionSettings.showInfoBox);
- $thoughtsContainer.toggle(extensionSettings.showCharacterThoughts);
-
- // Show/hide dividers intelligently
- // Divider after User Stats: shown if User Stats is visible AND at least one section after it is visible
- const showDividerAfterStats = extensionSettings.showUserStats &&
- (extensionSettings.showInfoBox || extensionSettings.showCharacterThoughts);
- $('#rpg-divider-stats').toggle(showDividerAfterStats);
-
- // Divider after Info Box: shown if Info Box is visible AND Mind Reading is visible
- const showDividerAfterInfo = extensionSettings.showInfoBox &&
- extensionSettings.showCharacterThoughts;
- $('#rpg-divider-info').toggle(showDividerAfterInfo);
-}
-
-/**
- * Applies the selected panel position.
- */
-function applyPanelPosition() {
- if (!$panelContainer) return;
-
- const isMobile = window.innerWidth <= 1000;
-
- // Remove all position classes
- $panelContainer.removeClass('rpg-position-left rpg-position-right rpg-position-top');
-
- // On mobile, don't apply desktop position classes
- if (isMobile) {
- return;
- }
-
- // Desktop: Add the appropriate position class
- $panelContainer.addClass(`rpg-position-${extensionSettings.panelPosition}`);
-
- // Update collapse toggle icon direction for new position
- updateCollapseToggleIcon();
-}
-
-/**
- * Updates the model selector visibility.
- */
-/**
- * Updates the UI based on generation mode selection.
- */
-function updateGenerationModeUI() {
- if (extensionSettings.generationMode === 'together') {
- // In "together" mode, manual update button is hidden
- $('#rpg-manual-update').hide();
- } else {
- // In "separate" mode, manual update button is visible
- $('#rpg-manual-update').show();
- }
-}
-
-/**
- * Generates just the example portion - previous tracker data without tags or explanations.
- * This will be appended to the last assistant message to show the format.
- * Each section is wrapped in markdown code blocks.
- */
-function generateTrackerExample() {
- let example = '';
-
- // Use COMMITTED data for generation context, not displayed data
- // Wrap each tracker section in markdown code blocks
- if (extensionSettings.showUserStats && committedTrackerData.userStats) {
- example += '```\n' + committedTrackerData.userStats + '\n```\n\n';
- }
-
- if (extensionSettings.showInfoBox && committedTrackerData.infoBox) {
- example += '```\n' + committedTrackerData.infoBox + '\n```\n\n';
- }
-
- if (extensionSettings.showCharacterThoughts && committedTrackerData.characterThoughts) {
- example += '```\n' + committedTrackerData.characterThoughts + '\n```';
- }
-
- return example.trim();
-}
-
-/**
- * Generates the instruction portion - format specifications and guidelines.
- * @param {boolean} includeHtmlPrompt - Whether to include the HTML prompt (true for main generation, false for separate tracker generation)
- * @param {boolean} includeContinuation - Whether to include "After updating the trackers, continue..." instruction
- */
-function generateTrackerInstructions(includeHtmlPrompt = true, includeContinuation = true) {
- const userName = getContext().name1;
- const classicStats = extensionSettings.classicStats;
- let instructions = '';
-
- // Check if any trackers are enabled
- const hasAnyTrackers = extensionSettings.showUserStats || extensionSettings.showInfoBox || extensionSettings.showCharacterThoughts;
-
- // Only add tracker instructions if at least one tracker is enabled
- if (hasAnyTrackers) {
- // Universal instruction header
- instructions += `\nYou must start your response with an appropriate update to the trackers in EXACTLY the same format as below, enclosed in separate Markdown code fences. Replace X with proper numbers and placeholders in [brackets] (while removing the brackets themselves) with in-world details ${userName} perceives about the current scene and the present characters. Consider the last trackers in the conversation (if they exist). Manage them accordingly and realistically; raise, lower, change, or keep the values unchanged based on the user's actions, the passage of time, and logical consequences:\n`;
-
- // Add format specifications for each enabled tracker
- if (extensionSettings.showUserStats) {
- instructions += '```\n';
- instructions += `${userName}'s Stats\n`;
- instructions += '---\n';
- instructions += '- Health: X%\n';
- instructions += '- Satiety: X%\n';
- instructions += '- Energy: X%\n';
- instructions += '- Hygiene: X%\n';
- instructions += '- Arousal: X%\n';
- instructions += '[Mood Emoji]: [Conditions (up to three traits)]\n';
- instructions += 'Inventory: [Clothing/Armor, Inventory Items (list of important items/none)]\n';
- instructions += '```\n\n';
- }
-
- if (extensionSettings.showInfoBox) {
- instructions += '```\n';
- instructions += 'Info Box\n';
- instructions += '---\n';
- instructions += '🗓️: [Weekday, Month, Year]\n';
- instructions += '[Weather Emoji]: [Forecast]\n';
- instructions += '🌡️: [Temperature in °C]\n';
- instructions += '🕒: [Time Start → Time End]\n';
- instructions += '🗺️: [Location]\n';
- instructions += '```\n\n';
- }
-
- if (extensionSettings.showCharacterThoughts) {
- instructions += '```\n';
- instructions += 'Present Characters\n';
- instructions += '---\n';
- instructions += `[Present Character's Emoji (do not include ${userName}; state "Unavailable" if no major characters are present in the scene)]: [Name, Visible Physical State (up to three traits), Observable Demeanor Cue (one trait)] | [Enemy/Neutral/Friend/Lover] | [Internal Monologue (in first person POV, up to three sentences long)]\n`;
- instructions += '```\n\n';
- }
-
- // Only add continuation instruction if includeContinuation is true
- if (includeContinuation) {
- instructions += `After updating the trackers, continue directly from where the last message in the chat history left off. Ensure the trackers you provide naturally reflect and influence the narrative. Character behavior, dialogue, and story events should acknowledge these conditions when relevant, such as fatigue affecting performance, low hygiene influencing social interactions, environmental factors shaping the scene, a character's emotional state coloring their responses, and so on.\n\n`;
- }
-
- // Include attributes and dice roll only if there was a dice roll
- if (extensionSettings.lastDiceRoll) {
- const roll = extensionSettings.lastDiceRoll;
- instructions += `${userName}'s attributes: STR ${classicStats.str}, DEX ${classicStats.dex}, CON ${classicStats.con}, INT ${classicStats.int}, WIS ${classicStats.wis}, CHA ${classicStats.cha}\n`;
- instructions += `${userName} rolled ${roll.total} on the last ${roll.formula} roll. Based on their attributes, decide whether they succeeded or failed the action they attempted.\n\n`;
- }
- }
-
- // Append HTML prompt if enabled AND includeHtmlPrompt is true
- if (extensionSettings.enableHtmlPrompt && includeHtmlPrompt) {
- // Add newlines only if we had tracker instructions
- if (hasAnyTrackers) {
- instructions += ``;
- } else {
- instructions += `\n`;
- }
-
- instructions += `If appropriate, include inline HTML, CSS, and JS elements for creative, visual storytelling throughout your response:
-- Use them liberally to depict any in-world content that can be visualized (screens, posters, books, signs, letters, logos, crests, seals, medallions, labels, etc.), with creative license for animations, 3D effects, pop-ups, dropdowns, websites, and so on.
-- Style them thematically to match the theme (e.g., sleek for sci-fi, rustic for fantasy), ensuring text is visible.
-- Embed all resources directly (e.g., inline SVGs) so nothing relies on external fonts or libraries.
-- Place elements naturally in the narrative where characters would see or use them, with no limits on format or application.
-- These HTML/CSS/JS elements must be rendered directly without enclosing them in code fences.`;
- }
-
- return instructions;
-}
-
-/**
- * Generates a formatted contextual summary for SEPARATE mode injection.
- * This creates a hybrid summary with clean formatting for main roleplay generation.
- */
-function generateContextualSummary() {
- // Use COMMITTED data for generation context, not displayed data
- const userName = getContext().name1;
- let summary = '';
-
- // console.log('[RPG Companion] generateContextualSummary called');
- // console.log('[RPG Companion] committedTrackerData.userStats:', committedTrackerData.userStats);
- // console.log('[RPG Companion] extensionSettings.userStats:', JSON.stringify(extensionSettings.userStats));
-
- // Parse the data into readable format
- if (extensionSettings.showUserStats && committedTrackerData.userStats) {
- const stats = extensionSettings.userStats;
- // console.log('[RPG Companion] Building stats summary with:', stats);
- summary += `${userName}'s Stats:\n`;
- summary += `Condition: Health ${stats.health}%, Satiety ${stats.satiety}%, Energy ${stats.energy}%, Hygiene ${stats.hygiene}%, Arousal ${stats.arousal}% | ${stats.mood} ${stats.conditions}\n`;
- if (stats.inventory && stats.inventory !== 'None') {
- summary += `Inventory: ${stats.inventory}\n`;
- }
- // Include classic stats (attributes) and dice roll only if there was a dice roll
- if (extensionSettings.lastDiceRoll) {
- const classicStats = extensionSettings.classicStats;
- const roll = extensionSettings.lastDiceRoll;
- summary += `Attributes: STR ${classicStats.str}, DEX ${classicStats.dex}, CON ${classicStats.con}, INT ${classicStats.int}, WIS ${classicStats.wis}, CHA ${classicStats.cha}\n`;
- summary += `${userName} rolled ${roll.total} on the last ${roll.formula} roll. Based on their attributes, decide whether they succeed or fail the action they attempt.\n`;
- }
- summary += `\n`;
- }
-
- if (extensionSettings.showInfoBox && committedTrackerData.infoBox) {
- // Parse info box data
- const lines = committedTrackerData.infoBox.split('\n');
- let date = '', weather = '', temp = '', time = '', location = '';
-
- // console.log('[RPG Companion] 🔍 Parsing Info Box lines:', lines);
-
- for (const line of lines) {
- // console.log('[RPG Companion] 🔍 Processing line:', line);
- // Use separate if statements (not else if) so each line is checked against all conditions
- if (line.includes('🗓️:')) {
- date = line.replace('🗓️:', '').trim();
- // console.log('[RPG Companion] 📅 Found date:', date);
- }
- if (line.includes('🌡️:')) {
- temp = line.replace('🌡️:', '').trim();
- // console.log('[RPG Companion] 🌡️ Found temp:', temp);
- }
- if (line.includes('🕒:')) {
- time = line.replace('🕒:', '').trim();
- // console.log('[RPG Companion] 🕒 Found time:', time);
- }
- if (line.includes('🗺️:')) {
- location = line.replace('🗺️:', '').trim();
- // console.log('[RPG Companion] 🗺️ Found location:', location);
- }
- // Check for weather emojis - use a simpler approach
- const weatherEmojis = ['🌤️', '☀️', '⛅', '🌦️', '🌧️', '⛈️', '🌩️', '🌨️', '❄️', '🌫️'];
- const startsWithWeatherEmoji = weatherEmojis.some(emoji => line.startsWith(emoji + ':'));
- if (startsWithWeatherEmoji && !line.includes('🌡️') && !line.includes('🗺️')) {
- // Extract weather description (remove emoji and colon)
- weather = line.substring(line.indexOf(':') + 1).trim();
- // console.log('[RPG Companion] 🌧️ Found weather:', weather);
- }
- }
-
- // console.log('[RPG Companion] 🔍 Parsed values - date:', date, 'weather:', weather, 'temp:', temp, 'time:', time, 'location:', location);
-
- if (date || weather || temp || time || location) {
- summary += `Information:\n`;
- summary += `Scene: `;
- if (date) summary += `${date}`;
- if (location) summary += ` | ${location}`;
- if (time) summary += ` | ${time}`;
- if (weather) summary += ` | ${weather}`;
- if (temp) summary += ` | ${temp}`;
- summary += `\n\n`;
- }
- }
-
- if (extensionSettings.showCharacterThoughts && committedTrackerData.characterThoughts) {
- const lines = committedTrackerData.characterThoughts.split('\n').filter(l => l.trim() && !l.includes('---') && !l.includes('Present Characters'));
-
- if (lines.length > 0 && !lines[0].toLowerCase().includes('unavailable')) {
- summary += `Present Characters And Their Thoughts:\n`;
- for (const line of lines) {
- const parts = line.split('|').map(p => p.trim());
- if (parts.length >= 3) {
- const nameAndState = parts[0]; // Emoji, name, physical state, demeanor
- const relationship = parts[1];
- const thoughts = parts[2];
- summary += `${nameAndState} (${relationship}) | ${thoughts}\n`;
- }
- }
- }
- }
-
- return summary.trim();
-}
-
-/**
- * Generates the RPG tracking prompt text (for backward compatibility with separate mode).
- */
-function generateRPGPromptText() {
- // Use COMMITTED data for generation context, not displayed data
- const userName = getContext().name1;
-
- let promptText = '';
-
- promptText += `Here are the previous trackers in the roleplay that you should consider when responding:\n`;
- promptText += `
-
- `;
-
- $userStatsContainer.html(html);
-
- // Add event listeners for editable stat values
- $('.rpg-editable-stat').on('blur', function() {
- const field = $(this).data('field');
- const textValue = $(this).text().replace('%', '').trim();
- let value = parseInt(textValue);
-
- // Validate and clamp value between 0 and 100
- if (isNaN(value)) {
- value = 0;
- }
- value = Math.max(0, Math.min(100, value));
-
- // Update the setting
- extensionSettings.userStats[field] = value;
-
- // Also update lastGeneratedData to keep it in sync
- if (!lastGeneratedData.userStats) {
- lastGeneratedData.userStats = '';
- }
- // Regenerate the userStats text with updated value
- const statsText = `Health: ${extensionSettings.userStats.health}%\nSatiety: ${extensionSettings.userStats.satiety}%\nEnergy: ${extensionSettings.userStats.energy}%\nHygiene: ${extensionSettings.userStats.hygiene}%\nArousal: ${extensionSettings.userStats.arousal}%\n${extensionSettings.userStats.mood}: ${extensionSettings.userStats.conditions}\nInventory: ${extensionSettings.userStats.inventory}`;
- lastGeneratedData.userStats = statsText;
-
- saveSettings();
- saveChatData();
- updateMessageSwipeData();
-
- // Re-render to update the bar
- renderUserStats();
- });
-
- // Add event listener for inventory editing
- $('.rpg-inventory-items.rpg-editable').on('blur', function() {
- const value = $(this).text().trim();
- extensionSettings.userStats.inventory = value || 'None';
-
- // Update lastGeneratedData
- const statsText = `Health: ${extensionSettings.userStats.health}%\nSatiety: ${extensionSettings.userStats.satiety}%\nEnergy: ${extensionSettings.userStats.energy}%\nHygiene: ${extensionSettings.userStats.hygiene}%\nArousal: ${extensionSettings.userStats.arousal}%\n${extensionSettings.userStats.mood}: ${extensionSettings.userStats.conditions}\nInventory: ${extensionSettings.userStats.inventory}`;
- lastGeneratedData.userStats = statsText;
-
- saveSettings();
- saveChatData();
- updateMessageSwipeData();
- });
-
- // Add event listeners for mood/conditions editing
- $('.rpg-mood-emoji.rpg-editable').on('blur', function() {
- const value = $(this).text().trim();
- extensionSettings.userStats.mood = value || '😐';
-
- // Update lastGeneratedData
- const statsText = `Health: ${extensionSettings.userStats.health}%\nSatiety: ${extensionSettings.userStats.satiety}%\nEnergy: ${extensionSettings.userStats.energy}%\nHygiene: ${extensionSettings.userStats.hygiene}%\nArousal: ${extensionSettings.userStats.arousal}%\n${extensionSettings.userStats.mood}: ${extensionSettings.userStats.conditions}\nInventory: ${extensionSettings.userStats.inventory}`;
- lastGeneratedData.userStats = statsText;
-
- saveSettings();
- saveChatData();
- updateMessageSwipeData();
- });
-
- $('.rpg-mood-conditions.rpg-editable').on('blur', function() {
- const value = $(this).text().trim();
- extensionSettings.userStats.conditions = value || 'None';
-
- // Update lastGeneratedData
- const statsText = `Health: ${extensionSettings.userStats.health}%\nSatiety: ${extensionSettings.userStats.satiety}%\nEnergy: ${extensionSettings.userStats.energy}%\nHygiene: ${extensionSettings.userStats.hygiene}%\nArousal: ${extensionSettings.userStats.arousal}%\n${extensionSettings.userStats.mood}: ${extensionSettings.userStats.conditions}\nInventory: ${extensionSettings.userStats.inventory}`;
- lastGeneratedData.userStats = statsText;
-
- saveSettings();
- saveChatData();
- updateMessageSwipeData();
- });
-}
-
-/**
- * Renders the info box as a visual dashboard.
- */
-function renderInfoBox() {
- if (!extensionSettings.showInfoBox || !$infoBoxContainer) {
- return;
- }
-
- // Add updating class for animation
- if (extensionSettings.enableAnimations) {
- $infoBoxContainer.addClass('rpg-content-updating');
- }
-
- // If no data yet, show placeholder
- if (!lastGeneratedData.infoBox) {
- const placeholderHtml = `
-
-
-
-
- 
-
-
-
-
- ${stats.inventory || 'None'}
-
-
-
-
-
- Health:
-
- ${stats.health}%
-
-
-
- Satiety:
-
- ${stats.satiety}%
-
-
-
- Energy:
-
- ${stats.energy}%
-
-
-
- Hygiene:
-
- ${stats.hygiene}%
-
-
-
- Arousal:
-
- ${stats.arousal}%
-
-
-
- ${stats.mood}
- ${stats.conditions}
-
-
-
-
-
-
-
- STR
-
-
-
- DEX
-
-
-
- CON
-
-
-
- INT
-
-
-
- WIS
-
-
-
- CHA
-
-
-
-
-
- `;
- $infoBoxContainer.html(placeholderHtml);
- if (extensionSettings.enableAnimations) {
- setTimeout(() => $infoBoxContainer.removeClass('rpg-content-updating'), 500);
- }
- return;
- }
-
- // console.log('[RPG Companion] renderInfoBox called with data:', lastGeneratedData.infoBox);
-
- // Parse the info box data
- const lines = lastGeneratedData.infoBox.split('\n');
- // console.log('[RPG Companion] Info Box split into lines:', lines);
- const data = {
- date: '',
- weekday: '',
- month: '',
- year: '',
- weatherEmoji: '',
- weatherForecast: '',
- temperature: '',
- tempValue: 0,
- timeStart: '',
- timeEnd: '',
- location: '',
- characters: []
- };
-
- for (const line of lines) {
- // console.log('[RPG Companion] Processing line:', line);
-
- if (line.includes('🗓️:')) {
- // console.log('[RPG Companion] → Matched DATE');
- const dateStr = line.replace('🗓️:', '').trim();
- // Parse format: "Weekday, Month Day, Year" or "Weekday, Month, Year"
- const dateParts = dateStr.split(',').map(p => p.trim());
- data.weekday = dateParts[0] || '';
- data.month = dateParts[1] || '';
- data.year = dateParts[2] || '';
- data.date = dateStr;
- } else if (line.includes('🌡️:')) {
- // console.log('[RPG Companion] → Matched TEMPERATURE');
- const tempStr = line.replace('🌡️:', '').trim();
- data.temperature = tempStr;
- // Extract numeric value
- const tempMatch = tempStr.match(/(-?\d+)/);
- if (tempMatch) {
- data.tempValue = parseInt(tempMatch[1]);
- }
- } else if (line.includes('🕒:')) {
- // console.log('[RPG Companion] → Matched TIME');
- const timeStr = line.replace('🕒:', '').trim();
- data.time = timeStr;
- // Parse "HH:MM → HH:MM" format
- const timeParts = timeStr.split('→').map(t => t.trim());
- data.timeStart = timeParts[0] || '';
- data.timeEnd = timeParts[1] || '';
- } else if (line.includes('🗺️:')) {
- // console.log('[RPG Companion] → Matched LOCATION');
- data.location = line.replace('🗺️:', '').trim();
- } else {
- // Check if it's a weather line
- // Since \p{Emoji} doesn't work reliably, use a simpler approach
- const hasColon = line.includes(':');
- const notInfoBox = !line.includes('Info Box');
- const notDivider = !line.includes('---');
- const notCodeFence = !line.trim().startsWith('```');
-
- // console.log('[RPG Companion] → Checking weather conditions:', {
- // line: line,
- // hasColon: hasColon,
- // notInfoBox: notInfoBox,
- // notDivider: notDivider
- // });
-
- if (hasColon && notInfoBox && notDivider && notCodeFence && line.trim().length > 0) {
- // Match format: [Weather Emoji]: [Forecast]
- // Capture everything before colon as emoji, everything after as forecast
- // console.log('[RPG Companion] → Testing WEATHER match for:', line);
- const weatherMatch = line.match(/^\s*([^:]+):\s*(.+)$/);
- if (weatherMatch) {
- const potentialEmoji = weatherMatch[1].trim();
- const forecast = weatherMatch[2].trim();
-
- // If the first part is short (likely emoji), treat as weather
- if (potentialEmoji.length <= 5) {
- data.weatherEmoji = potentialEmoji;
- data.weatherForecast = forecast;
- // console.log('[RPG Companion] ✓ Weather parsed:', data.weatherEmoji, data.weatherForecast);
- } else {
- // console.log('[RPG Companion] ✗ First part too long for emoji:', potentialEmoji);
- }
- } else {
- // console.log('[RPG Companion] ✗ Weather regex did not match');
- }
- } else {
- // console.log('[RPG Companion] → No match for this line');
- }
- }
- }
-
- // console.log('[RPG Companion] Parsed Info Box data:', {
- // date: data.date,
- // weatherEmoji: data.weatherEmoji,
- // weatherForecast: data.weatherForecast,
- // temperature: data.temperature,
- // timeStart: data.timeStart,
- // location: data.location
- // });
-
- // Build visual dashboard HTML
- // Row 1: Date, Weather, Temperature, Time widgets
- let html = '';
-
- // Calendar widget - always show (editable even if empty)
- const monthShort = data.month ? data.month.substring(0, 3).toUpperCase() : 'MON';
- const weekdayShort = data.weekday ? data.weekday.substring(0, 3).toUpperCase() : 'DAY';
- const yearDisplay = data.year || 'YEAR';
- html += `
-
- `;
-
- // Weather widget - always show (editable even if empty)
- const weatherEmoji = data.weatherEmoji || '🌤️';
- const weatherForecast = data.weatherForecast || 'Weather';
- html += `
-
- `;
-
- // Temperature widget - always show (editable even if empty)
- const tempDisplay = data.temperature || '20°C';
- const tempValue = data.tempValue || 20;
- const tempPercent = Math.min(100, Math.max(0, ((tempValue + 20) / 60) * 100));
- const tempColor = tempValue < 10 ? '#4a90e2' : tempValue < 25 ? '#67c23a' : '#e94560';
- html += `
-
- `;
-
- // Time widget - always show (editable even if empty)
- const timeDisplay = data.timeStart || '12:00';
- // Parse time for clock hands
- const timeMatch = timeDisplay.match(/(\d+):(\d+)/);
- let hourAngle = 0;
- let minuteAngle = 0;
- if (timeMatch) {
- const hours = parseInt(timeMatch[1]);
- const minutes = parseInt(timeMatch[2]);
- hourAngle = (hours % 12) * 30 + minutes * 0.5; // 30° per hour + 0.5° per minute
- minuteAngle = minutes * 6; // 6° per minute
- }
- html += `
-
- `;
-
- html += '
';
-
- // Row 2: Location widget (full width) - always show (editable even if empty)
- const locationDisplay = data.location || 'Location';
- html += `
-
-
-
- `;
-
- $infoBoxContainer.html(html);
-
- // Add event handlers for editable Info Box fields
- $infoBoxContainer.find('.rpg-editable').on('blur', function() {
- const field = $(this).data('field');
- const value = $(this).text().trim();
- updateInfoBoxField(field, value);
- });
-
- // Remove updating class after animation
- if (extensionSettings.enableAnimations) {
- setTimeout(() => $infoBoxContainer.removeClass('rpg-content-updating'), 500);
- }
-}
-
-/**
- * Renders character thoughts (Present Characters).
- */
-function renderThoughts() {
- if (!extensionSettings.showCharacterThoughts || !$thoughtsContainer) {
- return;
- }
-
- // Add updating class for animation
- if (extensionSettings.enableAnimations) {
- $thoughtsContainer.addClass('rpg-content-updating');
- }
-
- // Initialize if no data yet
- if (!lastGeneratedData.characterThoughts) {
- lastGeneratedData.characterThoughts = '';
- }
-
- const lines = lastGeneratedData.characterThoughts.split('\n');
- const presentCharacters = [];
-
- // console.log('[RPG Companion] Raw Present Characters:', lastGeneratedData.characterThoughts);
- // console.log('[RPG Companion] Split into lines:', lines);
-
- // Parse format: [Emoji]: [Name, Status, Demeanor] | [Relationship] | [Thoughts]
- for (const line of lines) {
- // Skip empty lines, headers, dividers, and code fences
- if (line.trim() &&
- !line.includes('Present Characters') &&
- !line.includes('---') &&
- !line.trim().startsWith('```')) {
-
- // Match the new format with pipes
- const parts = line.split('|').map(p => p.trim());
-
- if (parts.length >= 2) {
- // First part: [Emoji]: [Name, Status, Demeanor]
- const firstPart = parts[0].trim();
- const emojiMatch = firstPart.match(/^(.+?):\s*(.+)$/);
-
- if (emojiMatch) {
- const emoji = emojiMatch[1].trim();
- const info = emojiMatch[2].trim();
- const relationship = parts[1].trim(); // Enemy/Neutral/Friend/Lover
- const thoughts = parts[2] ? parts[2].trim() : '';
-
- // Parse name from info (first part before comma)
- const infoParts = info.split(',').map(p => p.trim());
- const name = infoParts[0] || '';
- const traits = infoParts.slice(1).join(', ');
-
- if (name && name.toLowerCase() !== 'unavailable') {
- presentCharacters.push({ emoji, name, traits, relationship, thoughts });
- // console.log('[RPG Companion] Parsed character:', { name, relationship });
- }
- }
- }
- }
- }
-
- // Relationship status to emoji mapping
- const relationshipEmojis = {
- 'Enemy': '⚔️',
- 'Neutral': '⚖️',
- 'Friend': '⭐',
- 'Lover': '❤️'
- };
-
- // Build HTML
- let html = '';
-
- // console.log('[RPG Companion] Total characters parsed:', presentCharacters.length);
- // console.log('[RPG Companion] Characters array:', presentCharacters);
-
- // If no characters parsed, show a placeholder editable card
- if (presentCharacters.length === 0) {
- // Get default character portrait (try to use the current character if in 1-on-1 chat)
- // Use a base64-encoded SVG placeholder as fallback to avoid 400 errors
- let defaultPortrait = FALLBACK_AVATAR_DATA_URI;
- let defaultName = 'Character';
-
- if (this_chid !== undefined && characters[this_chid]) {
- if (characters[this_chid].avatar && characters[this_chid].avatar !== 'none') {
- const thumbnailUrl = getSafeThumbnailUrl('avatar', characters[this_chid].avatar);
- if (thumbnailUrl) {
- defaultPortrait = thumbnailUrl;
- }
- }
- defaultName = characters[this_chid].name || 'Character';
- }
-
- html += '';
- html += `
-
';
- } else {
- html += '
-
- `;
- html += '
- 
-
- ⚖️
-
-
-
- 😊
- ${defaultName}
-
- Traits
- ';
- for (const char of presentCharacters) {
- // Find character portrait
- // Use a base64-encoded SVG placeholder as fallback to avoid 400 errors
- let characterPortrait = FALLBACK_AVATAR_DATA_URI;
-
- // console.log('[RPG Companion] Looking for avatar for:', char.name);
-
- // For group chats, search through group members first
- if (selected_group) {
- const groupMembers = getGroupMembers(selected_group);
- const matchingMember = groupMembers.find(member =>
- member && member.name && member.name.toLowerCase() === char.name.toLowerCase()
- );
-
- if (matchingMember && matchingMember.avatar && matchingMember.avatar !== 'none') {
- const thumbnailUrl = getSafeThumbnailUrl('avatar', matchingMember.avatar);
- if (thumbnailUrl) {
- characterPortrait = thumbnailUrl;
- }
- }
- }
-
- // For regular chats or if not found in group, search all characters
- if (characterPortrait === FALLBACK_AVATAR_DATA_URI && characters && characters.length > 0) {
- const matchingCharacter = characters.find(c =>
- c && c.name && c.name.toLowerCase() === char.name.toLowerCase()
- );
-
- if (matchingCharacter && matchingCharacter.avatar && matchingCharacter.avatar !== 'none') {
- const thumbnailUrl = getSafeThumbnailUrl('avatar', matchingCharacter.avatar);
- if (thumbnailUrl) {
- characterPortrait = thumbnailUrl;
- }
- }
- }
-
- // If this is the current character in a 1-on-1 chat, use their portrait
- if (this_chid !== undefined && characters[this_chid] &&
- characters[this_chid].name && characters[this_chid].name.toLowerCase() === char.name.toLowerCase()) {
- const thumbnailUrl = getSafeThumbnailUrl('avatar', characters[this_chid].avatar);
- if (thumbnailUrl) {
- characterPortrait = thumbnailUrl;
- }
- }
-
- // Get relationship emoji
- const relationshipEmoji = relationshipEmojis[char.relationship] || '⚖️';
-
- html += `
-
';
- }
-
- $thoughtsContainer.html(html);
-
- // Add event handlers for editable character fields
- $thoughtsContainer.find('.rpg-editable').on('blur', function() {
- const character = $(this).data('character');
- const field = $(this).data('field');
- const value = $(this).text().trim();
- updateCharacterField(character, field, value);
- });
-
- // Remove updating class after animation
- if (extensionSettings.enableAnimations) {
- setTimeout(() => $thoughtsContainer.removeClass('rpg-content-updating'), 600);
- }
-
- // Update chat overlay if enabled
- if (extensionSettings.showThoughtsInChat) {
- updateChatThoughts();
- }
-}
-
-/**
- * Updates a specific field in the Info Box data and re-renders.
- */
-function updateInfoBoxField(field, value) {
- if (!lastGeneratedData.infoBox) {
- // Initialize with empty info box if it doesn't exist
- lastGeneratedData.infoBox = 'Info Box\n---\n';
- }
-
- // Reconstruct the Info Box text with updated field
- const lines = lastGeneratedData.infoBox.split('\n');
- let dateLineFound = false;
- let dateLineIndex = -1;
-
- // Find the date line
- for (let i = 0; i < lines.length; i++) {
- if (lines[i].includes('🗓️:')) {
- dateLineFound = true;
- dateLineIndex = i;
- break;
- }
- }
-
- const updatedLines = lines.map((line, index) => {
- if (field === 'month' && line.includes('🗓️:')) {
- const parts = line.split(',');
- if (parts.length >= 2) {
- // parts[0] = "🗓️: Weekday", parts[1] = " Month", parts[2] = " Year"
- parts[1] = ' ' + value;
- return parts.join(',');
- } else if (parts.length === 1) {
- // No existing month/year, add them
- return `${parts[0]}, ${value}, YEAR`;
- }
- } else if (field === 'weekday' && line.includes('🗓️:')) {
- const parts = line.split(',');
- // Keep the emoji, just update the weekday
- const month = parts[1] ? parts[1].trim() : 'Month';
- const year = parts[2] ? parts[2].trim() : 'YEAR';
- return `🗓️: ${value}, ${month}, ${year}`;
- } else if (field === 'year' && line.includes('🗓️:')) {
- const parts = line.split(',');
- if (parts.length >= 3) {
- parts[2] = ' ' + value;
- return parts.join(',');
- } else if (parts.length === 2) {
- // No existing year, add it
- return `${parts[0]}, ${parts[1]}, ${value}`;
- } else if (parts.length === 1) {
- // No existing month/year, add them
- return `${parts[0]}, Month, ${value}`;
- }
- } else if (field === 'weatherEmoji' && line.match(/^[^:]+:\s*.+$/) && !line.includes('🗓️') && !line.includes('🌡️') && !line.includes('🕒') && !line.includes('🗺️') && !line.includes('Info Box') && !line.includes('---')) {
- // This is the weather line
- const parts = line.split(':');
- if (parts.length >= 2) {
- return `${value}: ${parts.slice(1).join(':').trim()}`;
- }
- } else if (field === 'weatherForecast' && line.match(/^[^:]+:\s*.+$/) && !line.includes('🗓️') && !line.includes('🌡️') && !line.includes('🕒') && !line.includes('🗺️') && !line.includes('Info Box') && !line.includes('---')) {
- // This is the weather line
- const parts = line.split(':');
- if (parts.length >= 2) {
- return `${parts[0].trim()}: ${value}`;
- }
- } else if (field === 'temperature' && line.includes('🌡️:')) {
- return `🌡️: ${value}`;
- } else if (field === 'timeStart' && line.includes('🕒:')) {
- // Update time format: "HH:MM → HH:MM"
- // When user edits, set both start and end time to the new value
- return `🕒: ${value} → ${value}`;
- } else if (field === 'location' && line.includes('🗺️:')) {
- return `🗺️: ${value}`;
- }
- return line;
- });
-
- // If editing a date field but no date line exists, create one after the divider
- if ((field === 'month' || field === 'weekday' || field === 'year') && !dateLineFound) {
- // Find the divider line
- const dividerIndex = updatedLines.findIndex(line => line.includes('---'));
- if (dividerIndex >= 0) {
- // Create initial date line with the edited field
- let newDateLine = '';
- if (field === 'weekday') {
- newDateLine = `🗓️: ${value}, Month, YEAR`;
- } else if (field === 'month') {
- newDateLine = `🗓️: Weekday, ${value}, YEAR`;
- } else if (field === 'year') {
- newDateLine = `🗓️: Weekday, Month, ${value}`;
- }
- // Insert after the divider
- updatedLines.splice(dividerIndex + 1, 0, newDateLine);
- }
- }
-
- // If editing weather but no weather line exists, create one
- if ((field === 'weatherEmoji' || field === 'weatherForecast')) {
- let weatherLineFound = false;
- for (const line of updatedLines) {
- // Check if this is a weather line (has emoji and forecast, not one of the special fields)
- if (line.match(/^[^:]+:\s*.+$/) && !line.includes('🗓️') && !line.includes('🌡️') && !line.includes('🕒') && !line.includes('🗺️') && !line.includes('Info Box') && !line.includes('---')) {
- weatherLineFound = true;
- break;
- }
- }
-
- if (!weatherLineFound) {
- const dividerIndex = updatedLines.findIndex(line => line.includes('---'));
- if (dividerIndex >= 0) {
- let newWeatherLine = '';
- if (field === 'weatherEmoji') {
- newWeatherLine = `${value}: Weather`;
- } else if (field === 'weatherForecast') {
- newWeatherLine = `🌤️: ${value}`;
- }
- // Insert after date line if it exists, otherwise after divider
- const dateIndex = updatedLines.findIndex(line => line.includes('🗓️:'));
- const insertIndex = dateIndex >= 0 ? dateIndex + 1 : dividerIndex + 1;
- updatedLines.splice(insertIndex, 0, newWeatherLine);
- }
- }
- }
-
- // If editing temperature but no temperature line exists, create one
- if (field === 'temperature') {
- const tempLineFound = updatedLines.some(line => line.includes('🌡️:'));
- if (!tempLineFound) {
- const dividerIndex = updatedLines.findIndex(line => line.includes('---'));
- if (dividerIndex >= 0) {
- const newTempLine = `🌡️: ${value}`;
- // Find last non-empty line before creating position
- let insertIndex = dividerIndex + 1;
- for (let i = 0; i < updatedLines.length; i++) {
- if (updatedLines[i].includes('🗓️:') || updatedLines[i].match(/^[^:]+:\s*.+$/)) {
- insertIndex = i + 1;
- }
- }
- updatedLines.splice(insertIndex, 0, newTempLine);
- }
- }
- }
-
- // If editing time but no time line exists, create one
- if (field === 'timeStart') {
- const timeLineFound = updatedLines.some(line => line.includes('🕒:'));
- if (!timeLineFound) {
- const dividerIndex = updatedLines.findIndex(line => line.includes('---'));
- if (dividerIndex >= 0) {
- const newTimeLine = `🕒: ${value} → ${value}`;
- // Find last non-empty line before creating position
- let insertIndex = dividerIndex + 1;
- for (let i = 0; i < updatedLines.length; i++) {
- if (updatedLines[i].includes('🗓️:') || updatedLines[i].includes('🌡️:') || updatedLines[i].match(/^[^:]+:\s*.+$/)) {
- insertIndex = i + 1;
- }
- }
- updatedLines.splice(insertIndex, 0, newTimeLine);
- }
- }
- }
-
- // If editing location but no location line exists, create one
- if (field === 'location') {
- const locationLineFound = updatedLines.some(line => line.includes('🗺️:'));
- if (!locationLineFound) {
- const dividerIndex = updatedLines.findIndex(line => line.includes('---'));
- if (dividerIndex >= 0) {
- const newLocationLine = `🗺️: ${value}`;
- // Insert at the end (before any empty lines)
- let insertIndex = updatedLines.length;
- for (let i = updatedLines.length - 1; i >= 0; i--) {
- if (updatedLines[i].trim() !== '') {
- insertIndex = i + 1;
- break;
- }
- }
- updatedLines.splice(insertIndex, 0, newLocationLine);
- }
- }
- }
-
- lastGeneratedData.infoBox = updatedLines.join('\n');
-
- // Update the message's swipe data
- const chat = getContext().chat;
- if (chat && chat.length > 0) {
- for (let i = chat.length - 1; i >= 0; i--) {
- const message = chat[i];
- if (!message.is_user) {
- if (message.extra && message.extra.rpg_companion_swipes) {
- const swipeId = message.swipe_id || 0;
- if (message.extra.rpg_companion_swipes[swipeId]) {
- message.extra.rpg_companion_swipes[swipeId].infoBox = updatedLines.join('\n');
- // console.log('[RPG Companion] Updated infoBox in message swipe data');
- }
- }
- break;
- }
- }
- }
-
- saveChatData();
- renderInfoBox();
-}
-
-/**
- * Updates a specific character field in Present Characters data and re-renders.
- */
-function updateCharacterField(characterName, field, value) {
- // console.log('[RPG Companion] 📝 updateCharacterField called - character:', characterName, 'field:', field, 'value:', value);
- // console.log('[RPG Companion] 📝 Current lastGeneratedData.characterThoughts:', lastGeneratedData.characterThoughts);
-
- // Initialize if it doesn't exist
- if (!lastGeneratedData.characterThoughts) {
- lastGeneratedData.characterThoughts = 'Present Characters\n---\n';
- }
-
- const lines = lastGeneratedData.characterThoughts.split('\n');
- let characterFound = false;
-
- const updatedLines = lines.map(line => {
- // Case-insensitive character name matching
- if (line.toLowerCase().includes(characterName.toLowerCase())) {
- characterFound = true;
- const parts = line.split('|').map(p => p.trim());
- if (parts.length >= 2) {
- const firstPart = parts[0];
- const emojiMatch = firstPart.match(/^(.+?):\s*(.+)$/);
-
- if (emojiMatch) {
- let emoji = emojiMatch[1].trim();
- let info = emojiMatch[2].trim();
- let relationship = parts[1];
- let thoughts = parts[2] || '';
-
- const infoParts = info.split(',').map(p => p.trim());
- let name = infoParts[0];
- let traits = infoParts.slice(1).join(', ');
-
- if (field === 'emoji') {
- emoji = value;
- } else if (field === 'name') {
- name = value;
- } else if (field === 'traits') {
- traits = value;
- } else if (field === 'thoughts') {
- thoughts = value;
- } else if (field === 'relationship') {
- const emojiToRelationship = {
- '⚔️': 'Enemy',
- '⚖️': 'Neutral',
- '⭐': 'Friend',
- '❤️': 'Lover'
- };
- relationship = emojiToRelationship[value] || value;
- }
-
- const newInfo = traits ? `${name}, ${traits}` : name;
- return `${emoji}: ${newInfo} | ${relationship} | ${thoughts}`;
- }
- }
- }
- return line;
- });
-
- // If character wasn't found, create a new character line
- if (!characterFound) {
- // Find the divider line
- const dividerIndex = updatedLines.findIndex(line => line.includes('---'));
- if (dividerIndex >= 0) {
- // Create initial character line with the edited field
- let emoji = '😊';
- let name = characterName;
- let traits = 'Traits';
- let relationship = 'Neutral';
- let thoughts = '';
-
- // Apply the edited field
- if (field === 'emoji') {
- emoji = value;
- } else if (field === 'name') {
- name = value;
- } else if (field === 'traits') {
- traits = value;
- } else if (field === 'thoughts') {
- thoughts = value;
- } else if (field === 'relationship') {
- const emojiToRelationship = {
- '⚔️': 'Enemy',
- '⚖️': 'Neutral',
- '⭐': 'Friend',
- '❤️': 'Lover'
- };
- relationship = emojiToRelationship[value] || value;
- }
-
- const newCharacterLine = `${emoji}: ${name}, ${traits} | ${relationship} | ${thoughts}`;
- // Insert after the divider
- updatedLines.splice(dividerIndex + 1, 0, newCharacterLine);
- }
- }
-
- lastGeneratedData.characterThoughts = updatedLines.join('\n');
- // console.log('[RPG Companion] 💾 Updated lastGeneratedData.characterThoughts:', lastGeneratedData.characterThoughts);
-
- // Also update the last assistant message's swipe data
- const chat = getContext().chat;
- if (chat && chat.length > 0) {
- // Find the last assistant message
- for (let i = chat.length - 1; i >= 0; i--) {
- const message = chat[i];
- if (!message.is_user) {
- // Found last assistant message - update its swipe data
- if (message.extra && message.extra.rpg_companion_swipes) {
- const swipeId = message.swipe_id || 0;
- if (message.extra.rpg_companion_swipes[swipeId]) {
- message.extra.rpg_companion_swipes[swipeId].characterThoughts = updatedLines.join('\n');
- // console.log('[RPG Companion] Updated thoughts in message swipe data');
- }
- }
- break;
- }
- }
- }
-
- saveChatData();
-
- // Always update the sidebar panel
- renderThoughts();
-
- // For thoughts edited from the bubble, delay recreation to allow blur event to complete
- // This ensures the edit is saved first, then the bubble is recreated with correct layout
- if (field === 'thoughts') {
- setTimeout(() => {
- updateChatThoughts();
- }, 100);
- } else {
- // For other fields, recreate immediately
- updateChatThoughts();
- }
-}
-
-/**
- * Updates or removes thought overlays in the chat.
- */
-function updateChatThoughts() {
- // console.log('[RPG Companion] ======== updateChatThoughts called ========');
- // console.log('[RPG Companion] Extension enabled:', extensionSettings.enabled);
- // console.log('[RPG Companion] showThoughtsInChat setting:', extensionSettings.showThoughtsInChat);
- // console.log('[RPG Companion] Toggle element checked:', $('#rpg-toggle-thoughts-in-chat').prop('checked'));
- // console.log('[RPG Companion] lastGeneratedData.characterThoughts:', lastGeneratedData.characterThoughts);
-
- // Remove existing thought panel and icon
- $('#rpg-thought-panel').remove();
- $('#rpg-thought-icon').remove();
- $('#chat').off('scroll.thoughtPanel');
- $(window).off('resize.thoughtPanel');
- $(document).off('click.thoughtPanel');
-
- // If extension is disabled, thoughts in chat are disabled, or no thoughts, just return
- if (!extensionSettings.enabled || !extensionSettings.showThoughtsInChat || !lastGeneratedData.characterThoughts) {
- // console.log('[RPG Companion] Thoughts in chat disabled or no data');
- return;
- }
-
- // Parse the Present Characters data to get thoughts
- const lines = lastGeneratedData.characterThoughts.split('\n');
- const thoughtsArray = []; // Array of {name, emoji, thought}
-
- // console.log('[RPG Companion] Parsing thoughts from lines:', lines);
-
- for (const line of lines) {
- if (line.trim() &&
- !line.includes('Present Characters') &&
- !line.includes('---') &&
- !line.trim().startsWith('```')) {
-
- const parts = line.split('|').map(p => p.trim());
- // console.log('[RPG Companion] Line parts:', parts);
-
- if (parts.length >= 3) {
- const firstPart = parts[0].trim();
- const emojiMatch = firstPart.match(/^(.+?):\s*(.+)$/);
-
- if (emojiMatch) {
- const emoji = emojiMatch[1].trim();
- const info = emojiMatch[2].trim();
- const thoughts = parts[2] ? parts[2].trim() : '';
-
- const infoParts = info.split(',').map(p => p.trim());
- const name = infoParts[0] || '';
-
- // console.log('[RPG Companion] Parsed thought - Name:', name, 'Thought:', thoughts);
-
- if (name && thoughts && name.toLowerCase() !== 'unavailable') {
- thoughtsArray.push({ name: name.toLowerCase(), emoji, thought: thoughts });
- // console.log('[RPG Companion] Added to thoughtsArray:', name.toLowerCase());
- }
- }
- }
- }
- }
-
- // If no thoughts parsed, return
- if (thoughtsArray.length === 0) {
- // console.log('[RPG Companion] No thoughts parsed, returning');
- return;
- }
-
- // console.log('[RPG Companion] Total thoughts:', thoughtsArray.length);
- // console.log('[RPG Companion] Thoughts array:', thoughtsArray);
-
- // Find the last message to position near
- const $messages = $('#chat .mes');
- let $targetMessage = null;
-
- // Find the most recent non-user message
- for (let i = $messages.length - 1; i >= 0; i--) {
- const $message = $messages.eq(i);
- if ($message.attr('is_user') !== 'true') {
- $targetMessage = $message;
- break;
- }
- }
-
- if (!$targetMessage) {
- // console.log('[RPG Companion] No target message found');
- return;
- }
-
- // Create the thought panel with all thoughts
- createThoughtPanel($targetMessage, thoughtsArray);
-}
-
-/**
- * Creates or updates the floating thought panel positioned next to the character's avatar
- */
-function createThoughtPanel($message, thoughtsArray) {
- // Remove existing thought panel
- $('#rpg-thought-panel').remove();
- $('#rpg-thought-icon').remove();
-
- // Get the avatar position from the message
- const $avatar = $message.find('.avatar img');
- if (!$avatar.length) {
- // console.log('[RPG Companion] No avatar found in message');
- return;
- }
-
- const avatarRect = $avatar[0].getBoundingClientRect();
- const panelPosition = extensionSettings.panelPosition;
- const theme = extensionSettings.theme;
-
- // Build thought bubbles HTML
- let thoughtsHtml = '';
- thoughtsArray.forEach((thought, index) => {
- thoughtsHtml += `
-
-
- `;
- }
- html += '
- 
-
- ${relationshipEmoji}
-
-
-
- ${char.emoji}
- ${char.name}
-
- ${char.traits}
-
-
- `;
- // Add divider between thoughts (except for last one)
- if (index < thoughtsArray.length - 1) {
- thoughtsHtml += '';
- }
- });
-
- // Create the floating thought panel with theme
- const $thoughtPanel = $(`
-
- ${thought.emoji}
-
-
- ${thought.thought}
-
-
-
-
- `);
-
- // Create the collapsed thought icon
- const $thoughtIcon = $(`
-
- `);
-
- // Apply custom theme colors if custom theme
- if (theme === 'custom') {
- const customStyles = {
- '--rpg-bg': extensionSettings.customColors.bg,
- '--rpg-accent': extensionSettings.customColors.accent,
- '--rpg-text': extensionSettings.customColors.text,
- '--rpg-highlight': extensionSettings.customColors.highlight
- };
- $thoughtPanel.css(customStyles);
- $thoughtIcon.css(customStyles);
- }
-
- // Force a consistent width for the bubble to ensure proper positioning
- $thoughtPanel.css('width', '350px');
-
- // Append to body so it's not clipped by chat container
- $('body').append($thoughtPanel);
- $('body').append($thoughtIcon);
-
- // Position the panel next to the avatar
- const panelWidth = 350;
- const panelMargin = 20;
-
- let top = avatarRect.top + (avatarRect.height / 2);
- let left;
- let right;
- let useRightPosition = false;
- let iconTop = avatarRect.top;
- let iconLeft;
-
- // Detect mobile viewport (matches CSS breakpoint)
- const isMobile = window.innerWidth <= 1000;
-
- if (isMobile) {
- // On mobile: position icon horizontally centered on avatar
- // The CSS transform will shift it upward by 60px
- iconTop = avatarRect.top; // Start at avatar top (CSS will move it up)
- iconLeft = avatarRect.left + (avatarRect.width / 2) - 18; // Centered horizontally (18px = half of 36px icon width)
-
- // Center the thought panel horizontally on mobile
- left = window.innerWidth / 2 - panelWidth / 2;
- top = avatarRect.top + avatarRect.height + 60; // Position below icon with spacing
-
- // No side-specific classes on mobile
- $thoughtPanel.removeClass('rpg-thought-panel-left rpg-thought-panel-right');
- $thoughtIcon.removeClass('rpg-thought-icon-left rpg-thought-icon-right');
-
- console.log('[RPG Companion] Mobile thought icon positioning:', {
- isMobile,
- windowWidth: window.innerWidth,
- avatarLeft: avatarRect.left,
- avatarWidth: avatarRect.width,
- iconLeft,
- iconTop
- });
- } else if (panelPosition === 'left') {
- // Main panel is on left, so thought bubble goes to RIGHT side
- // Mirror the left side positioning: bubble should be same distance from avatar
- // but on the opposite side, extending to the right
- const chatContainer = $('#chat')[0];
- const chatRect = chatContainer ? chatContainer.getBoundingClientRect() : { right: window.innerWidth };
-
- // Position bubble starting from chat edge, extending right
- left = chatRect.right + panelMargin; // Start at chat's right edge + margin
- useRightPosition = false; // Use left positioning so it extends right
- iconLeft = chatRect.right + 10; // Icon just at the chat edge
- $thoughtPanel.addClass('rpg-thought-panel-right');
- $thoughtIcon.addClass('rpg-thought-icon-right');
-
- // Position circles to flow from left (toward chat/avatar) to right (toward panel)
- $thoughtPanel.find('.rpg-thought-circles').css({
- top: 'calc(50% - 50px)',
- left: '-25px',
- bottom: 'auto',
- right: 'auto'
- });
- // Mirror the circle flow for right side (left-to-right)
- $thoughtPanel.find('.rpg-thought-circles').css('align-items', 'flex-start');
- $thoughtPanel.find('.rpg-circle-1').css({ 'align-self': 'flex-start', 'margin-right': '0', 'margin-left': '0' });
- $thoughtPanel.find('.rpg-circle-2').css({ 'align-self': 'flex-start', 'margin-right': '0', 'margin-left': '4px' });
- $thoughtPanel.find('.rpg-circle-3').css({ 'align-self': 'flex-start', 'margin-right': '0', 'margin-left': '8px' });
- } else {
- // Main panel is on right, so thought bubble goes on left (near avatar)
- left = avatarRect.left - panelWidth - panelMargin;
- iconLeft = avatarRect.left - 40;
- $thoughtPanel.addClass('rpg-thought-panel-left');
- $thoughtIcon.addClass('rpg-thought-icon-left');
-
- // Position circles to flow from avatar (left) to bubble (more left)
- // Circles should flow right-to-left when bubble is on left
- $thoughtPanel.find('.rpg-thought-circles').css({
- top: 'calc(50% - 50px)',
- right: '-25px',
- bottom: 'auto',
- left: 'auto'
- });
- // Keep the circle flow for left side (right-to-left) - default from CSS
- $thoughtPanel.find('.rpg-thought-circles').css('align-items', 'flex-end');
- $thoughtPanel.find('.rpg-circle-1').css({ 'align-self': 'flex-end', 'margin-left': '0', 'margin-right': '0' });
- $thoughtPanel.find('.rpg-circle-2').css({ 'align-self': 'flex-end', 'margin-left': '0', 'margin-right': '4px' });
- $thoughtPanel.find('.rpg-circle-3').css({ 'align-self': 'flex-end', 'margin-left': '0', 'margin-right': '8px' });
- }
-
- if (useRightPosition) {
- $thoughtPanel.css({
- top: `${top}px`,
- right: `${right}px`,
- left: 'auto' // Clear left positioning
- });
- } else {
- $thoughtPanel.css({
- top: `${top}px`,
- left: `${left}px`,
- right: 'auto' // Clear right positioning
- });
- }
-
- $thoughtIcon.css({
- top: `${iconTop}px`,
- left: `${iconLeft}px`,
- right: 'auto' // Clear any right positioning
- });
-
- // Initially hide the panel and show the icon
- $thoughtPanel.hide();
- $thoughtIcon.show();
-
- // console.log('[RPG Companion] Thought panel created at:', { top, left });
-
- // Close button functionality
- $thoughtPanel.find('.rpg-thought-close').on('click', function(e) {
- e.stopPropagation();
- $thoughtPanel.fadeOut(200);
- $thoughtIcon.fadeIn(200);
- });
-
- // Icon click to show panel
- $thoughtIcon.on('click', function(e) {
- e.stopPropagation();
- $thoughtIcon.fadeOut(200);
- $thoughtPanel.fadeIn(200);
- });
-
- // Add event handlers for editable thoughts in the bubble
- $thoughtPanel.find('.rpg-editable').on('blur', function() {
- const character = $(this).data('character');
- const field = $(this).data('field');
- const value = $(this).text().trim();
- // console.log('[RPG Companion] 💭 Thought bubble blur event - character:', character, 'field:', field, 'value:', value);
- updateCharacterField(character, field, value);
- });
-
- // RAF throttling for smooth position updates
- let positionUpdateRaf = null;
-
- // Update position on scroll with RAF throttling
- const updatePanelPosition = () => {
- if (!$message.is(':visible')) {
- $thoughtPanel.hide();
- $thoughtIcon.hide();
- return;
- }
-
- // Cancel any pending RAF
- if (positionUpdateRaf) {
- cancelAnimationFrame(positionUpdateRaf);
- }
-
- // Schedule update on next frame
- positionUpdateRaf = requestAnimationFrame(() => {
- const newAvatarRect = $avatar[0].getBoundingClientRect();
- const newTop = newAvatarRect.top + (newAvatarRect.height / 2);
- const newIconTop = newAvatarRect.top;
- let newLeft, newIconLeft;
-
- if (panelPosition === 'left') {
- // Position at chat's right edge, extending right
- const chatContainer = $('#chat')[0];
- const chatRect = chatContainer ? chatContainer.getBoundingClientRect() : { right: window.innerWidth };
- newLeft = chatRect.right + panelMargin;
- newIconLeft = chatRect.right + 10;
-
- $thoughtPanel.css({
- top: `${newTop}px`,
- left: `${newLeft}px`,
- right: 'auto'
- });
- } else {
- // Left position relative to avatar
- newLeft = newAvatarRect.left - panelWidth - panelMargin;
- newIconLeft = newAvatarRect.left - 40;
-
- $thoughtPanel.css({
- top: `${newTop}px`,
- left: `${newLeft}px`,
- right: 'auto'
- });
- }
-
- $thoughtIcon.css({
- top: `${newIconTop}px`,
- left: `${newIconLeft}px`,
- right: 'auto'
- });
-
- if ($thoughtPanel.is(':visible')) {
- $thoughtPanel.show();
- }
- if ($thoughtIcon.is(':visible')) {
- $thoughtIcon.show();
- }
-
- positionUpdateRaf = null;
- });
- };
-
- // Update position on scroll and resize
- $('#chat').on('scroll.thoughtPanel', updatePanelPosition);
- $(window).on('resize.thoughtPanel', updatePanelPosition);
-
- // Remove panel when clicking outside (but not when clicking icon or panel)
- $(document).on('click.thoughtPanel', function(e) {
- if (!$(e.target).closest('#rpg-thought-panel, #rpg-thought-icon').length) {
- // Hide the panel and show the icon instead of removing
- $thoughtPanel.fadeOut(200);
- $thoughtIcon.fadeIn(200);
- }
- });
-}
-
-/**
- * Event handler for when generation is about to start (TOGETHER MODE).
- * Injects RPG tracking prompt into the generation.
- * @param {string} type - Generation type
- * @param {object} data - Generation data including quietImage flag
- */
-function onGenerationStarted(type, data) {
- // console.log('[RPG Companion] onGenerationStarted called');
- // console.log('[RPG Companion] enabled:', extensionSettings.enabled);
- // console.log('[RPG Companion] generationMode:', extensionSettings.generationMode);
- // console.log('[RPG Companion] ⚡ EVENT: onGenerationStarted - lastActionWasSwipe =', lastActionWasSwipe, '| isGenerating =', isGenerating);
- // console.log('[RPG Companion] Committed Prompt:', committedTrackerData);
-
- // Skip tracker injection for image generation requests
- if (data?.quietImage) {
- // console.log('[RPG Companion] Detected image generation (quietImage=true), skipping tracker injection');
- return;
- }
-
- if (!extensionSettings.enabled) {
- return;
- }
-
- const chat = getContext().chat;
- const lastMessage = chat && chat.length > 0 ? chat[chat.length - 1] : null;
-
- // For SEPARATE mode only: Check if we need to commit extension data
- // BUT: Only do this for the MAIN generation, not the tracker update generation
- // If isGenerating is true, this is the tracker update generation (second call), so skip flag logic
- // console.log('[RPG Companion DEBUG] Before generating:', lastGeneratedData.characterThoughts, ' , committed - ', committedTrackerData.characterThoughts);
- if (extensionSettings.generationMode === 'separate' && !isGenerating) {
- if (!lastActionWasSwipe) {
- // User sent a new message - commit lastGeneratedData before generation
- // console.log('[RPG Companion] 📝 COMMIT: New message - committing lastGeneratedData');
- // console.log('[RPG Companion] BEFORE commit - committedTrackerData:', {
- // userStats: committedTrackerData.userStats ? 'exists' : 'null',
- // infoBox: committedTrackerData.infoBox ? 'exists' : 'null',
- // characterThoughts: committedTrackerData.characterThoughts ? 'exists' : 'null'
- // });
- // console.log('[RPG Companion] BEFORE commit - lastGeneratedData:', {
- // userStats: lastGeneratedData.userStats ? 'exists' : 'null',
- // infoBox: lastGeneratedData.infoBox ? 'exists' : 'null',
- // characterThoughts: lastGeneratedData.characterThoughts ? 'exists' : 'null'
- // });
- committedTrackerData.userStats = lastGeneratedData.userStats;
- committedTrackerData.infoBox = lastGeneratedData.infoBox;
- committedTrackerData.characterThoughts = lastGeneratedData.characterThoughts;
- // console.log('[RPG Companion] AFTER commit - committedTrackerData:', {
- // userStats: committedTrackerData.userStats ? 'exists' : 'null',
- // infoBox: committedTrackerData.infoBox ? 'exists' : 'null',
- // characterThoughts: committedTrackerData.characterThoughts ? 'exists' : 'null'
- // });
-
- // Reset flag after committing (ready for next cycle)
-
- } else {
- // console.log('[RPG Companion] 🔄 SWIPE: Using existing committedTrackerData (no commit)');
- // console.log('[RPG Companion] committedTrackerData:', {
- // userStats: committedTrackerData.userStats ? 'exists' : 'null',
- // infoBox: committedTrackerData.infoBox ? 'exists' : 'null',
- // characterThoughts: committedTrackerData.characterThoughts ? 'exists' : 'null'
- // });
- // Reset flag after using it (swipe generation complete, ready for next action)
- }
- }
-
- // For TOGETHER mode: Check if we need to commit extension data
- // Same logic as separate mode - commit on new messages, keep existing data on swipes
- if (extensionSettings.generationMode === 'together') {
- if (!lastActionWasSwipe) {
- // User sent a new message - commit lastGeneratedData before generation
- // console.log('[RPG Companion] 📝 TOGETHER MODE COMMIT: New message - committing lastGeneratedData');
- committedTrackerData.userStats = lastGeneratedData.userStats;
- committedTrackerData.infoBox = lastGeneratedData.infoBox;
- committedTrackerData.characterThoughts = lastGeneratedData.characterThoughts;
- } else {
- //console.log('[RPG Companion] 🔄 TOGETHER MODE SWIPE: Using existing committedTrackerData (no commit)');
- }
- }
-
- // Use the committed tracker data as source for generation
- // console.log('[RPG Companion] Using committedTrackerData for generation');
- // console.log('[RPG Companion] committedTrackerData.userStats:', committedTrackerData.userStats);
-
- // Parse stats from committed data to update the extensionSettings for prompt generation
- if (committedTrackerData.userStats) {
- // console.log('[RPG Companion] Parsing committed userStats into extensionSettings');
- parseUserStats(committedTrackerData.userStats);
- // console.log('[RPG Companion] After parsing, extensionSettings.userStats:', JSON.stringify(extensionSettings.userStats));
- }
-
- if (extensionSettings.generationMode === 'together') {
- // console.log('[RPG Companion] In together mode, generating prompts...');
- const example = generateTrackerExample();
- // Don't include HTML prompt in instructions - inject it separately to avoid duplication on swipes
- const instructions = generateTrackerInstructions(false, true);
-
- // console.log('[RPG Companion] Example:', example ? 'exists' : 'empty');
- // console.log('[RPG Companion] Chat length:', chat ? chat.length : 'chat is null');
-
- // Find the last assistant message in the chat history
- let lastAssistantDepth = -1; // -1 means not found
- if (chat && chat.length > 0) {
- // console.log('[RPG Companion] Searching for last assistant message...');
- // Start from depth 1 (skip depth 0 which is usually user's message or prefill)
- for (let depth = 1; depth < chat.length; depth++) {
- const index = chat.length - 1 - depth; // Convert depth to index
- const message = chat[index];
- // console.log('[RPG Companion] Checking depth', depth, 'index', index, 'message properties:', Object.keys(message));
- // Check for assistant message: not user and not system
- if (!message.is_user && !message.is_system) {
- // Found assistant message at this depth
- // Inject at the SAME depth to prepend to this assistant message
- lastAssistantDepth = depth;
- // console.log('[RPG Companion] Found last assistant message at depth', depth, '-> injecting at same depth:', lastAssistantDepth);
- break;
- }
- }
- }
-
- // If we have previous tracker data and found an assistant message, inject it as an assistant message
- if (example && lastAssistantDepth > 0) {
- setExtensionPrompt('rpg-companion-example', example, extension_prompt_types.IN_CHAT, lastAssistantDepth, false, extension_prompt_roles.ASSISTANT);
- // console.log('[RPG Companion] Injected tracker example as assistant message at depth:', lastAssistantDepth);
- } else {
- // console.log('[RPG Companion] NOT injecting example. example:', !!example, 'lastAssistantDepth:', lastAssistantDepth);
- }
-
- // Inject the instructions as a user message at depth 0 (right before generation)
- setExtensionPrompt('rpg-companion-inject', instructions, extension_prompt_types.IN_CHAT, 0, false, extension_prompt_roles.USER);
- // console.log('[RPG Companion] Injected RPG tracking instructions at depth 0 (right before generation)');
-
- // Inject HTML prompt separately at depth 0 if enabled (prevents duplication on swipes)
- if (extensionSettings.enableHtmlPrompt) {
- const htmlPrompt = `\nIf appropriate, include inline HTML, CSS, and JS elements for creative, visual storytelling throughout your response:
-- Use them liberally to depict any in-world content that can be visualized (screens, posters, books, signs, letters, logos, crests, seals, medallions, labels, etc.), with creative license for animations, 3D effects, pop-ups, dropdowns, websites, and so on.
-- Style them thematically to match the theme (e.g., sleek for sci-fi, rustic for fantasy), ensuring text is visible.
-- Embed all resources directly (e.g., inline SVGs) so nothing relies on external fonts or libraries.
-- Place elements naturally in the narrative where characters would see or use them, with no limits on format or application.
-- These HTML/CSS/JS elements must be rendered directly without enclosing them in code fences.`;
-
- setExtensionPrompt('rpg-companion-html', htmlPrompt, extension_prompt_types.IN_CHAT, 0, false);
- // console.log('[RPG Companion] Injected HTML prompt at depth 0 for together mode');
- } else {
- // Clear HTML prompt if disabled
- setExtensionPrompt('rpg-companion-html', '', extension_prompt_types.IN_CHAT, 0, false);
- }
- } else if (extensionSettings.generationMode === 'separate') {
- // In SEPARATE mode, inject the contextual summary for main roleplay generation
- const contextSummary = generateContextualSummary();
-
- if (contextSummary) {
- const wrappedContext = `Here is context information about the current scene, and what follows is the last message in the chat history:
-
-
-
-
-
-
- ${thoughtsHtml}
-
-
+
+
+ `;
+ $infoBoxContainer.html(placeholderHtml);
+ if (extensionSettings.enableAnimations) {
+ setTimeout(() => $infoBoxContainer.removeClass('rpg-content-updating'), 500);
+ }
+ return;
+ }
+
+ // console.log('[RPG Companion] renderInfoBox called with data:', lastGeneratedData.infoBox);
+
+ // Parse the info box data
+ const lines = lastGeneratedData.infoBox.split('\n');
+ // console.log('[RPG Companion] Info Box split into lines:', lines);
+ const data = {
+ date: '',
+ weekday: '',
+ month: '',
+ year: '',
+ weatherEmoji: '',
+ weatherForecast: '',
+ temperature: '',
+ tempValue: 0,
+ timeStart: '',
+ timeEnd: '',
+ location: '',
+ characters: []
+ };
+
+ for (const line of lines) {
+ // console.log('[RPG Companion] Processing line:', line);
+
+ if (line.includes('🗓️:')) {
+ // console.log('[RPG Companion] → Matched DATE');
+ const dateStr = line.replace('🗓️:', '').trim();
+ // Parse format: "Weekday, Month Day, Year" or "Weekday, Month, Year"
+ const dateParts = dateStr.split(',').map(p => p.trim());
+ data.weekday = dateParts[0] || '';
+ data.month = dateParts[1] || '';
+ data.year = dateParts[2] || '';
+ data.date = dateStr;
+ } else if (line.includes('🌡️:')) {
+ // console.log('[RPG Companion] → Matched TEMPERATURE');
+ const tempStr = line.replace('🌡️:', '').trim();
+ data.temperature = tempStr;
+ // Extract numeric value
+ const tempMatch = tempStr.match(/(-?\d+)/);
+ if (tempMatch) {
+ data.tempValue = parseInt(tempMatch[1]);
+ }
+ } else if (line.includes('🕒:')) {
+ // console.log('[RPG Companion] → Matched TIME');
+ const timeStr = line.replace('🕒:', '').trim();
+ data.time = timeStr;
+ // Parse "HH:MM → HH:MM" format
+ const timeParts = timeStr.split('→').map(t => t.trim());
+ data.timeStart = timeParts[0] || '';
+ data.timeEnd = timeParts[1] || '';
+ } else if (line.includes('🗺️:')) {
+ // console.log('[RPG Companion] → Matched LOCATION');
+ data.location = line.replace('🗺️:', '').trim();
+ } else {
+ // Check if it's a weather line
+ // Since \p{Emoji} doesn't work reliably, use a simpler approach
+ const hasColon = line.includes(':');
+ const notInfoBox = !line.includes('Info Box');
+ const notDivider = !line.includes('---');
+ const notCodeFence = !line.trim().startsWith('```');
+
+ // console.log('[RPG Companion] → Checking weather conditions:', {
+ // line: line,
+ // hasColon: hasColon,
+ // notInfoBox: notInfoBox,
+ // notDivider: notDivider
+ // });
+
+ if (hasColon && notInfoBox && notDivider && notCodeFence && line.trim().length > 0) {
+ // Match format: [Weather Emoji]: [Forecast]
+ // Capture everything before colon as emoji, everything after as forecast
+ // console.log('[RPG Companion] → Testing WEATHER match for:', line);
+ const weatherMatch = line.match(/^\s*([^:]+):\s*(.+)$/);
+ if (weatherMatch) {
+ const potentialEmoji = weatherMatch[1].trim();
+ const forecast = weatherMatch[2].trim();
+
+ // If the first part is short (likely emoji), treat as weather
+ if (potentialEmoji.length <= 5) {
+ data.weatherEmoji = potentialEmoji;
+ data.weatherForecast = forecast;
+ // console.log('[RPG Companion] ✓ Weather parsed:', data.weatherEmoji, data.weatherForecast);
+ } else {
+ // console.log('[RPG Companion] ✗ First part too long for emoji:', potentialEmoji);
+ }
+ } else {
+ // console.log('[RPG Companion] ✗ Weather regex did not match');
+ }
+ } else {
+ // console.log('[RPG Companion] → No match for this line');
+ }
+ }
+ }
+
+ // console.log('[RPG Companion] Parsed Info Box data:', {
+ // date: data.date,
+ // weatherEmoji: data.weatherEmoji,
+ // weatherForecast: data.weatherForecast,
+ // temperature: data.temperature,
+ // timeStart: data.timeStart,
+ // location: data.location
+ // });
+
+ // Build visual dashboard HTML
+ // Row 1: Date, Weather, Temperature, Time widgets
+ let html = '';
+
+ // Calendar widget - always show (editable even if empty)
+ const monthShort = data.month ? data.month.substring(0, 3).toUpperCase() : 'MON';
+ const weekdayShort = data.weekday ? data.weekday.substring(0, 3).toUpperCase() : 'DAY';
+ const yearDisplay = data.year || 'YEAR';
+ html += `
+
+ `;
+
+ // Weather widget - always show (editable even if empty)
+ const weatherEmoji = data.weatherEmoji || '🌤️';
+ const weatherForecast = data.weatherForecast || 'Weather';
+ html += `
+
+ `;
+
+ // Temperature widget - always show (editable even if empty)
+ const tempDisplay = data.temperature || '20°C';
+ const tempValue = data.tempValue || 20;
+ const tempPercent = Math.min(100, Math.max(0, ((tempValue + 20) / 60) * 100));
+ const tempColor = tempValue < 10 ? '#4a90e2' : tempValue < 25 ? '#67c23a' : '#e94560';
+ html += `
+
+ `;
+
+ // Time widget - always show (editable even if empty)
+ const timeDisplay = data.timeStart || '12:00';
+ // Parse time for clock hands
+ const timeMatch = timeDisplay.match(/(\d+):(\d+)/);
+ let hourAngle = 0;
+ let minuteAngle = 0;
+ if (timeMatch) {
+ const hours = parseInt(timeMatch[1]);
+ const minutes = parseInt(timeMatch[2]);
+ hourAngle = (hours % 12) * 30 + minutes * 0.5; // 30° per hour + 0.5° per minute
+ minuteAngle = minutes * 6; // 6° per minute
+ }
+ html += `
+
+ `;
+
+ html += '
';
+
+ // Row 2: Location widget (full width) - always show (editable even if empty)
+ const locationDisplay = data.location || 'Location';
+ html += `
+
+
+
+ `;
+
+ $infoBoxContainer.html(html);
+
+ // Add event handlers for editable Info Box fields
+ $infoBoxContainer.find('.rpg-editable').on('blur', function() {
+ const field = $(this).data('field');
+ const value = $(this).text().trim();
+ updateInfoBoxField(field, value);
+ });
+
+ // Remove updating class after animation
+ if (extensionSettings.enableAnimations) {
+ setTimeout(() => $infoBoxContainer.removeClass('rpg-content-updating'), 500);
+ }
+}
+
+/**
+ * Updates a specific field in the Info Box data and re-renders.
+ * Handles complex field reconstruction logic for date parts, weather, temperature, time, and location.
+ *
+ * @param {string} field - Field name to update
+ * @param {string} value - New value for the field
+ */
+export function updateInfoBoxField(field, value) {
+ if (!lastGeneratedData.infoBox) {
+ // Initialize with empty info box if it doesn't exist
+ lastGeneratedData.infoBox = 'Info Box\n---\n';
+ }
+
+ // Reconstruct the Info Box text with updated field
+ const lines = lastGeneratedData.infoBox.split('\n');
+ let dateLineFound = false;
+ let dateLineIndex = -1;
+
+ // Find the date line
+ for (let i = 0; i < lines.length; i++) {
+ if (lines[i].includes('🗓️:')) {
+ dateLineFound = true;
+ dateLineIndex = i;
+ break;
+ }
+ }
+
+ const updatedLines = lines.map((line, index) => {
+ if (field === 'month' && line.includes('🗓️:')) {
+ const parts = line.split(',');
+ if (parts.length >= 2) {
+ // parts[0] = "🗓️: Weekday", parts[1] = " Month", parts[2] = " Year"
+ parts[1] = ' ' + value;
+ return parts.join(',');
+ } else if (parts.length === 1) {
+ // No existing month/year, add them
+ return `${parts[0]}, ${value}, YEAR`;
+ }
+ } else if (field === 'weekday' && line.includes('🗓️:')) {
+ const parts = line.split(',');
+ // Keep the emoji, just update the weekday
+ const month = parts[1] ? parts[1].trim() : 'Month';
+ const year = parts[2] ? parts[2].trim() : 'YEAR';
+ return `🗓️: ${value}, ${month}, ${year}`;
+ } else if (field === 'year' && line.includes('🗓️:')) {
+ const parts = line.split(',');
+ if (parts.length >= 3) {
+ parts[2] = ' ' + value;
+ return parts.join(',');
+ } else if (parts.length === 2) {
+ // No existing year, add it
+ return `${parts[0]}, ${parts[1]}, ${value}`;
+ } else if (parts.length === 1) {
+ // No existing month/year, add them
+ return `${parts[0]}, Month, ${value}`;
+ }
+ } else if (field === 'weatherEmoji' && line.match(/^[^:]+:\s*.+$/) && !line.includes('🗓️') && !line.includes('🌡️') && !line.includes('🕒') && !line.includes('🗺️') && !line.includes('Info Box') && !line.includes('---')) {
+ // This is the weather line
+ const parts = line.split(':');
+ if (parts.length >= 2) {
+ return `${value}: ${parts.slice(1).join(':').trim()}`;
+ }
+ } else if (field === 'weatherForecast' && line.match(/^[^:]+:\s*.+$/) && !line.includes('🗓️') && !line.includes('🌡️') && !line.includes('🕒') && !line.includes('🗺️') && !line.includes('Info Box') && !line.includes('---')) {
+ // This is the weather line
+ const parts = line.split(':');
+ if (parts.length >= 2) {
+ return `${parts[0].trim()}: ${value}`;
+ }
+ } else if (field === 'temperature' && line.includes('🌡️:')) {
+ return `🌡️: ${value}`;
+ } else if (field === 'timeStart' && line.includes('🕒:')) {
+ // Update time format: "HH:MM → HH:MM"
+ // When user edits, set both start and end time to the new value
+ return `🕒: ${value} → ${value}`;
+ } else if (field === 'location' && line.includes('🗺️:')) {
+ return `🗺️: ${value}`;
+ }
+ return line;
+ });
+
+ // If editing a date field but no date line exists, create one after the divider
+ if ((field === 'month' || field === 'weekday' || field === 'year') && !dateLineFound) {
+ // Find the divider line
+ const dividerIndex = updatedLines.findIndex(line => line.includes('---'));
+ if (dividerIndex >= 0) {
+ // Create initial date line with the edited field
+ let newDateLine = '';
+ if (field === 'weekday') {
+ newDateLine = `🗓️: ${value}, Month, YEAR`;
+ } else if (field === 'month') {
+ newDateLine = `🗓️: Weekday, ${value}, YEAR`;
+ } else if (field === 'year') {
+ newDateLine = `🗓️: Weekday, Month, ${value}`;
+ }
+ // Insert after the divider
+ updatedLines.splice(dividerIndex + 1, 0, newDateLine);
+ }
+ }
+
+ // If editing weather but no weather line exists, create one
+ if ((field === 'weatherEmoji' || field === 'weatherForecast')) {
+ let weatherLineFound = false;
+ for (const line of updatedLines) {
+ // Check if this is a weather line (has emoji and forecast, not one of the special fields)
+ if (line.match(/^[^:]+:\s*.+$/) && !line.includes('🗓️') && !line.includes('🌡️') && !line.includes('🕒') && !line.includes('🗺️') && !line.includes('Info Box') && !line.includes('---')) {
+ weatherLineFound = true;
+ break;
+ }
+ }
+
+ if (!weatherLineFound) {
+ const dividerIndex = updatedLines.findIndex(line => line.includes('---'));
+ if (dividerIndex >= 0) {
+ let newWeatherLine = '';
+ if (field === 'weatherEmoji') {
+ newWeatherLine = `${value}: Weather`;
+ } else if (field === 'weatherForecast') {
+ newWeatherLine = `🌤️: ${value}`;
+ }
+ // Insert after date line if it exists, otherwise after divider
+ const dateIndex = updatedLines.findIndex(line => line.includes('🗓️:'));
+ const insertIndex = dateIndex >= 0 ? dateIndex + 1 : dividerIndex + 1;
+ updatedLines.splice(insertIndex, 0, newWeatherLine);
+ }
+ }
+ }
+
+ // If editing temperature but no temperature line exists, create one
+ if (field === 'temperature') {
+ const tempLineFound = updatedLines.some(line => line.includes('🌡️:'));
+ if (!tempLineFound) {
+ const dividerIndex = updatedLines.findIndex(line => line.includes('---'));
+ if (dividerIndex >= 0) {
+ const newTempLine = `🌡️: ${value}`;
+ // Find last non-empty line before creating position
+ let insertIndex = dividerIndex + 1;
+ for (let i = 0; i < updatedLines.length; i++) {
+ if (updatedLines[i].includes('🗓️:') || updatedLines[i].match(/^[^:]+:\s*.+$/)) {
+ insertIndex = i + 1;
+ }
+ }
+ updatedLines.splice(insertIndex, 0, newTempLine);
+ }
+ }
+ }
+
+ // If editing time but no time line exists, create one
+ if (field === 'timeStart') {
+ const timeLineFound = updatedLines.some(line => line.includes('🕒:'));
+ if (!timeLineFound) {
+ const dividerIndex = updatedLines.findIndex(line => line.includes('---'));
+ if (dividerIndex >= 0) {
+ const newTimeLine = `🕒: ${value} → ${value}`;
+ // Find last non-empty line before creating position
+ let insertIndex = dividerIndex + 1;
+ for (let i = 0; i < updatedLines.length; i++) {
+ if (updatedLines[i].includes('🗓️:') || updatedLines[i].includes('🌡️:') || updatedLines[i].match(/^[^:]+:\s*.+$/)) {
+ insertIndex = i + 1;
+ }
+ }
+ updatedLines.splice(insertIndex, 0, newTimeLine);
+ }
+ }
+ }
+
+ // If editing location but no location line exists, create one
+ if (field === 'location') {
+ const locationLineFound = updatedLines.some(line => line.includes('🗺️:'));
+ if (!locationLineFound) {
+ const dividerIndex = updatedLines.findIndex(line => line.includes('---'));
+ if (dividerIndex >= 0) {
+ const newLocationLine = `🗺️: ${value}`;
+ // Insert at the end (before any empty lines)
+ let insertIndex = updatedLines.length;
+ for (let i = updatedLines.length - 1; i >= 0; i--) {
+ if (updatedLines[i].trim() !== '') {
+ insertIndex = i + 1;
+ break;
+ }
+ }
+ updatedLines.splice(insertIndex, 0, newLocationLine);
+ }
+ }
+ }
+
+ lastGeneratedData.infoBox = updatedLines.join('\n');
+
+ // Update the message's swipe data
+ const chat = getContext().chat;
+ if (chat && chat.length > 0) {
+ for (let i = chat.length - 1; i >= 0; i--) {
+ const message = chat[i];
+ if (!message.is_user) {
+ if (message.extra && message.extra.rpg_companion_swipes) {
+ const swipeId = message.swipe_id || 0;
+ if (message.extra.rpg_companion_swipes[swipeId]) {
+ message.extra.rpg_companion_swipes[swipeId].infoBox = updatedLines.join('\n');
+ // console.log('[RPG Companion] Updated infoBox in message swipe data');
+ }
+ }
+ break;
+ }
+ }
+ }
+
+ saveChatData();
+ renderInfoBox();
+}
diff --git a/src/systems/rendering/inventory.js b/src/systems/rendering/inventory.js
new file mode 100644
index 0000000..5fec662
--- /dev/null
+++ b/src/systems/rendering/inventory.js
@@ -0,0 +1,462 @@
+/**
+ * Inventory Rendering Module
+ * Handles UI rendering for inventory v2 system
+ */
+
+import { extensionSettings, $inventoryContainer } from '../../core/state.js';
+import { getInventoryRenderOptions } from '../interaction/inventoryActions.js';
+import { parseItems } from '../../utils/itemParser.js';
+
+// Type imports
+/** @typedef {import('../../types/inventory.js').InventoryV2} InventoryV2 */
+
+/**
+ * Renders the inventory sub-tab navigation (On Person, Stored, Assets)
+ * @param {string} activeTab - Currently active sub-tab ('onPerson', 'stored', 'assets')
+ * @returns {string} HTML for sub-tab navigation
+ */
+export function renderInventorySubTabs(activeTab = 'onPerson') {
+ return `
+
+
+
+
+
+ `;
+}
+
+/**
+ * Renders the "On Person" inventory view with list or grid display
+ * @param {string} onPersonItems - Current on-person items (comma-separated string)
+ * @param {string} viewMode - View mode ('list' or 'grid')
+ * @returns {string} HTML for on-person view with items and add button
+ */
+export function renderOnPersonView(onPersonItems, viewMode = 'list') {
+ const items = parseItems(onPersonItems);
+
+ let itemsHtml = '';
+ if (items.length === 0) {
+ itemsHtml = 'No items carried
';
+ } else {
+ if (viewMode === 'grid') {
+ // Grid view: card-style items
+ itemsHtml = items.map((item, index) => `
+
+
+ ${escapeHtml(item)}
+
+ `).join('');
+ } else {
+ // List view: full-width rows
+ itemsHtml = items.map((item, index) => `
+
+ ${escapeHtml(item)}
+
+
+ `).join('');
+ }
+ }
+
+ const listViewClass = viewMode === 'list' ? 'rpg-item-list-view' : 'rpg-item-grid-view';
+
+ return `
+
+
+ `;
+}
+
+/**
+ * Renders the "Stored" inventory view with collapsible locations and list/grid views
+ * @param {Object.
+
+ Items Currently Carried
+
+
+
+
+
+
+
+
+
+
+
+ ${itemsHtml}
+
+
+
+ `;
+
+ return html;
+}
+
+/**
+ * Renders the "Assets" inventory view with list or grid display
+ * @param {string} assets - Current assets (vehicles, property, equipment)
+ * @param {string} viewMode - View mode ('list' or 'grid')
+ * @returns {string} HTML for assets view with items and add button
+ */
+export function renderAssetsView(assets, viewMode = 'list') {
+ const items = parseItems(assets);
+
+ let itemsHtml = '';
+ if (items.length === 0) {
+ itemsHtml = '
+
+ Storage Locations
+
+
+
+
+
+
+
+
+
+ `;
+
+ if (locations.length === 0) {
+ html += `
+
+
+ No storage locations yet. Click "Add Location" to create one.
+
+ `;
+ } else {
+ for (const location of locations) {
+ const itemString = stored[location];
+ const items = parseItems(itemString);
+ const isCollapsed = collapsedLocations.includes(location);
+ const locationId = escapeHtml(location).replace(/\s+/g, '-');
+
+ let itemsHtml = '';
+ if (items.length === 0) {
+ itemsHtml = 'No items stored here
';
+ } else {
+ if (viewMode === 'grid') {
+ // Grid view: card-style items
+ itemsHtml = items.map((item, index) => `
+
+
+ ${escapeHtml(item)}
+
+ `).join('');
+ } else {
+ // List view: full-width rows
+ itemsHtml = items.map((item, index) => `
+
+ ${escapeHtml(item)}
+
+
+ `).join('');
+ }
+ }
+
+ const listViewClass = viewMode === 'list' ? 'rpg-item-list-view' : 'rpg-item-grid-view';
+
+ html += `
+
+
+ `;
+ }
+ }
+
+ html += `
+
+
+
+ ${escapeHtml(location)}
+
+
+
+
+
+
+
+
+
+ ${itemsHtml}
+
+ No assets owned
';
+ } else {
+ if (viewMode === 'grid') {
+ // Grid view: card-style items
+ itemsHtml = items.map((item, index) => `
+
+
+ ${escapeHtml(item)}
+
+ `).join('');
+ } else {
+ // List view: full-width rows
+ itemsHtml = items.map((item, index) => `
+
+ ${escapeHtml(item)}
+
+
+ `).join('');
+ }
+ }
+
+ const listViewClass = viewMode === 'list' ? 'rpg-item-list-view' : 'rpg-item-grid-view';
+
+ return `
+
+
+ `;
+}
+
+/**
+ * Generates inventory HTML (internal helper)
+ * @param {InventoryV2} inventory - Inventory data to render
+ * @param {Object} options - Rendering options
+ * @param {string} options.activeSubTab - Currently active sub-tab ('onPerson', 'stored', 'assets')
+ * @param {string[]} options.collapsedLocations - Collapsed storage locations
+ * @returns {string} Complete HTML for inventory tab content
+ */
+function generateInventoryHTML(inventory, options = {}) {
+ const {
+ activeSubTab = 'onPerson',
+ collapsedLocations = []
+ } = options;
+
+ // Handle legacy v1 format - convert to v2 for display
+ let v2Inventory = inventory;
+ if (typeof inventory === 'string') {
+ v2Inventory = {
+ version: 2,
+ onPerson: inventory,
+ stored: {},
+ assets: 'None'
+ };
+ }
+
+ // Ensure v2 structure has all required fields
+ if (!v2Inventory || typeof v2Inventory !== 'object') {
+ v2Inventory = {
+ version: 2,
+ onPerson: 'None',
+ stored: {},
+ assets: 'None'
+ };
+ }
+
+ // Additional safety check: ensure required properties exist and are correct type
+ if (!v2Inventory.onPerson || typeof v2Inventory.onPerson !== 'string') {
+ v2Inventory.onPerson = 'None';
+ }
+ if (!v2Inventory.stored || typeof v2Inventory.stored !== 'object' || Array.isArray(v2Inventory.stored)) {
+ v2Inventory.stored = {};
+ }
+ if (!v2Inventory.assets || typeof v2Inventory.assets !== 'string') {
+ v2Inventory.assets = 'None';
+ }
+
+ let html = `
+
+
+ Vehicles, Property & Major Possessions
+
+
+
+
+
+
+
+
+
+
+
+ ${itemsHtml}
+
+
+
+ Assets include vehicles (cars, motorcycles), property (homes, apartments),
+ and major equipment (workshop tools, special items).
+
+
+ ${renderInventorySubTabs(activeSubTab)}
+
+ `;
+
+ return html;
+}
+
+/**
+ * Updates the inventory display in the DOM (used by inventoryActions)
+ * @param {string} containerId - ID of container element to update
+ * @param {Object} options - Rendering options (passed to generateInventoryHTML)
+ */
+export function updateInventoryDisplay(containerId, options = {}) {
+ const container = document.getElementById(containerId);
+ if (!container) {
+ console.warn(`[RPG Companion] Inventory container not found: ${containerId}`);
+ return;
+ }
+
+ const inventory = extensionSettings.userStats.inventory;
+ const html = generateInventoryHTML(inventory, options);
+ container.innerHTML = html;
+}
+
+/**
+ * Main inventory rendering function (matches pattern of other render functions)
+ * Gets data from state/settings and updates DOM directly.
+ * Call this after AI generation, character changes, or swipes.
+ */
+export function renderInventory() {
+ // Early return if container doesn't exist or section is hidden
+ if (!$inventoryContainer || !extensionSettings.showInventory) {
+ return;
+ }
+
+ // Get inventory data from settings
+ const inventory = extensionSettings.userStats.inventory;
+
+ // Get current render options (active tab, collapsed locations)
+ const options = getInventoryRenderOptions();
+
+ // Generate HTML and update DOM
+ const html = generateInventoryHTML(inventory, options);
+ $inventoryContainer.html(html);
+}
+
+/**
+ * Escapes HTML special characters to prevent XSS
+ * @param {string} text - Text to escape
+ * @returns {string} Escaped text
+ */
+function escapeHtml(text) {
+ if (!text) return '';
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+}
diff --git a/src/systems/rendering/thoughts.js b/src/systems/rendering/thoughts.js
new file mode 100644
index 0000000..03d9eb4
--- /dev/null
+++ b/src/systems/rendering/thoughts.js
@@ -0,0 +1,745 @@
+/**
+ * Character Thoughts Rendering Module
+ * Handles rendering of character thoughts panel and floating thought bubbles in chat
+ */
+
+import { getContext } from '../../../../../../extensions.js';
+import { this_chid, characters } from '../../../../../../../script.js';
+import { selected_group, getGroupMembers } from '../../../../../../group-chats.js';
+import {
+ extensionSettings,
+ lastGeneratedData,
+ $thoughtsContainer,
+ FALLBACK_AVATAR_DATA_URI
+} from '../../core/state.js';
+import { saveChatData } from '../../core/persistence.js';
+import { getSafeThumbnailUrl } from '../../utils/avatars.js';
+
+/**
+ * Renders character thoughts (Present Characters) panel.
+ * Displays character cards with avatars, relationship badges, and traits.
+ * Includes event listeners for editable character fields.
+ */
+export function renderThoughts() {
+ if (!extensionSettings.showCharacterThoughts || !$thoughtsContainer) {
+ return;
+ }
+
+ // Add updating class for animation
+ if (extensionSettings.enableAnimations) {
+ $thoughtsContainer.addClass('rpg-content-updating');
+ }
+
+ // Initialize if no data yet
+ if (!lastGeneratedData.characterThoughts) {
+ lastGeneratedData.characterThoughts = '';
+ }
+
+ const lines = lastGeneratedData.characterThoughts.split('\n');
+ const presentCharacters = [];
+
+ // console.log('[RPG Companion] Raw Present Characters:', lastGeneratedData.characterThoughts);
+ // console.log('[RPG Companion] Split into lines:', lines);
+
+ // Parse format: [Emoji]: [Name, Status, Demeanor] | [Relationship] | [Thoughts]
+ for (const line of lines) {
+ // Skip empty lines, headers, dividers, and code fences
+ if (line.trim() &&
+ !line.includes('Present Characters') &&
+ !line.includes('---') &&
+ !line.trim().startsWith('```')) {
+
+ // Match the new format with pipes
+ const parts = line.split('|').map(p => p.trim());
+
+ if (parts.length >= 2) {
+ // First part: [Emoji]: [Name, Status, Demeanor]
+ const firstPart = parts[0].trim();
+ const emojiMatch = firstPart.match(/^(.+?):\s*(.+)$/);
+
+ if (emojiMatch) {
+ const emoji = emojiMatch[1].trim();
+ const info = emojiMatch[2].trim();
+ const relationship = parts[1].trim(); // Enemy/Neutral/Friend/Lover
+ const thoughts = parts[2] ? parts[2].trim() : '';
+
+ // Parse name from info (first part before comma)
+ const infoParts = info.split(',').map(p => p.trim());
+ const name = infoParts[0] || '';
+ const traits = infoParts.slice(1).join(', ');
+
+ if (name && name.toLowerCase() !== 'unavailable') {
+ presentCharacters.push({ emoji, name, traits, relationship, thoughts });
+ // console.log('[RPG Companion] Parsed character:', { name, relationship });
+ }
+ }
+ }
+ }
+ }
+
+ // Relationship status to emoji mapping
+ const relationshipEmojis = {
+ 'Enemy': '⚔️',
+ 'Neutral': '⚖️',
+ 'Friend': '⭐',
+ 'Lover': '❤️'
+ };
+
+ // Build HTML
+ let html = '';
+
+ // console.log('[RPG Companion] Total characters parsed:', presentCharacters.length);
+ // console.log('[RPG Companion] Characters array:', presentCharacters);
+
+ // If no characters parsed, show a placeholder editable card
+ if (presentCharacters.length === 0) {
+ // Get default character portrait (try to use the current character if in 1-on-1 chat)
+ // Use a base64-encoded SVG placeholder as fallback to avoid 400 errors
+ let defaultPortrait = FALLBACK_AVATAR_DATA_URI;
+ let defaultName = 'Character';
+
+ if (this_chid !== undefined && characters[this_chid]) {
+ if (characters[this_chid].avatar && characters[this_chid].avatar !== 'none') {
+ const thumbnailUrl = getSafeThumbnailUrl('avatar', characters[this_chid].avatar);
+ if (thumbnailUrl) {
+ defaultPortrait = thumbnailUrl;
+ }
+ }
+ defaultName = characters[this_chid].name || 'Character';
+ }
+
+ html += '
+ `;
+
+ // Get view modes from settings (default to 'list')
+ const viewModes = extensionSettings.inventoryViewModes || {
+ onPerson: 'list',
+ stored: 'list',
+ assets: 'list'
+ };
+
+ // Render the active view
+ switch (activeSubTab) {
+ case 'onPerson':
+ html += renderOnPersonView(v2Inventory.onPerson, viewModes.onPerson);
+ break;
+ case 'stored':
+ html += renderStoredView(v2Inventory.stored, collapsedLocations, viewModes.stored);
+ break;
+ case 'assets':
+ html += renderAssetsView(v2Inventory.assets, viewModes.assets);
+ break;
+ default:
+ html += renderOnPersonView(v2Inventory.onPerson, viewModes.onPerson);
+ }
+
+ html += `
+
+ ';
+ html += `
+
';
+ } else {
+ html += '
+
+ `;
+ html += '
+
+
+ ⚖️
+
+
+
+ 😊
+ ${defaultName}
+
+ Traits
+ ';
+ for (const char of presentCharacters) {
+ // Find character portrait
+ // Use a base64-encoded SVG placeholder as fallback to avoid 400 errors
+ let characterPortrait = FALLBACK_AVATAR_DATA_URI;
+
+ // console.log('[RPG Companion] Looking for avatar for:', char.name);
+
+ // For group chats, search through group members first
+ if (selected_group) {
+ const groupMembers = getGroupMembers(selected_group);
+ const matchingMember = groupMembers.find(member =>
+ member && member.name && member.name.toLowerCase() === char.name.toLowerCase()
+ );
+
+ if (matchingMember && matchingMember.avatar && matchingMember.avatar !== 'none') {
+ const thumbnailUrl = getSafeThumbnailUrl('avatar', matchingMember.avatar);
+ if (thumbnailUrl) {
+ characterPortrait = thumbnailUrl;
+ }
+ }
+ }
+
+ // For regular chats or if not found in group, search all characters
+ if (characterPortrait === FALLBACK_AVATAR_DATA_URI && characters && characters.length > 0) {
+ const matchingCharacter = characters.find(c =>
+ c && c.name && c.name.toLowerCase() === char.name.toLowerCase()
+ );
+
+ if (matchingCharacter && matchingCharacter.avatar && matchingCharacter.avatar !== 'none') {
+ const thumbnailUrl = getSafeThumbnailUrl('avatar', matchingCharacter.avatar);
+ if (thumbnailUrl) {
+ characterPortrait = thumbnailUrl;
+ }
+ }
+ }
+
+ // If this is the current character in a 1-on-1 chat, use their portrait
+ if (this_chid !== undefined && characters[this_chid] &&
+ characters[this_chid].name && characters[this_chid].name.toLowerCase() === char.name.toLowerCase()) {
+ const thumbnailUrl = getSafeThumbnailUrl('avatar', characters[this_chid].avatar);
+ if (thumbnailUrl) {
+ characterPortrait = thumbnailUrl;
+ }
+ }
+
+ // Get relationship emoji
+ const relationshipEmoji = relationshipEmojis[char.relationship] || '⚖️';
+
+ html += `
+
';
+ }
+
+ $thoughtsContainer.html(html);
+
+ // Add event handlers for editable character fields
+ $thoughtsContainer.find('.rpg-editable').on('blur', function() {
+ const character = $(this).data('character');
+ const field = $(this).data('field');
+ const value = $(this).text().trim();
+ updateCharacterField(character, field, value);
+ });
+
+ // Remove updating class after animation
+ if (extensionSettings.enableAnimations) {
+ setTimeout(() => $thoughtsContainer.removeClass('rpg-content-updating'), 600);
+ }
+
+ // Update chat overlay if enabled
+ if (extensionSettings.showThoughtsInChat) {
+ updateChatThoughts();
+ }
+}
+
+/**
+ * Updates a specific character field in Present Characters data and re-renders.
+ * Handles character creation if character doesn't exist yet.
+ *
+ * @param {string} characterName - Name of the character to update
+ * @param {string} field - Field to update (emoji, name, traits, thoughts, relationship)
+ * @param {string} value - New value for the field
+ */
+export function updateCharacterField(characterName, field, value) {
+ // console.log('[RPG Companion] 📝 updateCharacterField called - character:', characterName, 'field:', field, 'value:', value);
+ // console.log('[RPG Companion] 📝 Current lastGeneratedData.characterThoughts:', lastGeneratedData.characterThoughts);
+
+ // Initialize if it doesn't exist
+ if (!lastGeneratedData.characterThoughts) {
+ lastGeneratedData.characterThoughts = 'Present Characters\n---\n';
+ }
+
+ const lines = lastGeneratedData.characterThoughts.split('\n');
+ let characterFound = false;
+
+ const updatedLines = lines.map(line => {
+ // Case-insensitive character name matching
+ if (line.toLowerCase().includes(characterName.toLowerCase())) {
+ characterFound = true;
+ const parts = line.split('|').map(p => p.trim());
+ if (parts.length >= 2) {
+ const firstPart = parts[0];
+ const emojiMatch = firstPart.match(/^(.+?):\s*(.+)$/);
+
+ if (emojiMatch) {
+ let emoji = emojiMatch[1].trim();
+ let info = emojiMatch[2].trim();
+ let relationship = parts[1];
+ let thoughts = parts[2] || '';
+
+ const infoParts = info.split(',').map(p => p.trim());
+ let name = infoParts[0];
+ let traits = infoParts.slice(1).join(', ');
+
+ if (field === 'emoji') {
+ emoji = value;
+ } else if (field === 'name') {
+ name = value;
+ } else if (field === 'traits') {
+ traits = value;
+ } else if (field === 'thoughts') {
+ thoughts = value;
+ } else if (field === 'relationship') {
+ const emojiToRelationship = {
+ '⚔️': 'Enemy',
+ '⚖️': 'Neutral',
+ '⭐': 'Friend',
+ '❤️': 'Lover'
+ };
+ relationship = emojiToRelationship[value] || value;
+ }
+
+ const newInfo = traits ? `${name}, ${traits}` : name;
+ return `${emoji}: ${newInfo} | ${relationship} | ${thoughts}`;
+ }
+ }
+ }
+ return line;
+ });
+
+ // If character wasn't found, create a new character line
+ if (!characterFound) {
+ // Find the divider line
+ const dividerIndex = updatedLines.findIndex(line => line.includes('---'));
+ if (dividerIndex >= 0) {
+ // Create initial character line with the edited field
+ let emoji = '😊';
+ let name = characterName;
+ let traits = 'Traits';
+ let relationship = 'Neutral';
+ let thoughts = '';
+
+ // Apply the edited field
+ if (field === 'emoji') {
+ emoji = value;
+ } else if (field === 'name') {
+ name = value;
+ } else if (field === 'traits') {
+ traits = value;
+ } else if (field === 'thoughts') {
+ thoughts = value;
+ } else if (field === 'relationship') {
+ const emojiToRelationship = {
+ '⚔️': 'Enemy',
+ '⚖️': 'Neutral',
+ '⭐': 'Friend',
+ '❤️': 'Lover'
+ };
+ relationship = emojiToRelationship[value] || value;
+ }
+
+ const newCharacterLine = `${emoji}: ${name}, ${traits} | ${relationship} | ${thoughts}`;
+ // Insert after the divider
+ updatedLines.splice(dividerIndex + 1, 0, newCharacterLine);
+ }
+ }
+
+ lastGeneratedData.characterThoughts = updatedLines.join('\n');
+ // console.log('[RPG Companion] 💾 Updated lastGeneratedData.characterThoughts:', lastGeneratedData.characterThoughts);
+
+ // Also update the last assistant message's swipe data
+ const chat = getContext().chat;
+ if (chat && chat.length > 0) {
+ // Find the last assistant message
+ for (let i = chat.length - 1; i >= 0; i--) {
+ const message = chat[i];
+ if (!message.is_user) {
+ // Found last assistant message - update its swipe data
+ if (message.extra && message.extra.rpg_companion_swipes) {
+ const swipeId = message.swipe_id || 0;
+ if (message.extra.rpg_companion_swipes[swipeId]) {
+ message.extra.rpg_companion_swipes[swipeId].characterThoughts = updatedLines.join('\n');
+ // console.log('[RPG Companion] Updated thoughts in message swipe data');
+ }
+ }
+ break;
+ }
+ }
+ }
+
+ saveChatData();
+
+ // Always update the sidebar panel
+ renderThoughts();
+
+ // For thoughts edited from the bubble, delay recreation to allow blur event to complete
+ // This ensures the edit is saved first, then the bubble is recreated with correct layout
+ if (field === 'thoughts') {
+ setTimeout(() => {
+ updateChatThoughts();
+ }, 100);
+ } else {
+ // For other fields, recreate immediately
+ updateChatThoughts();
+ }
+}
+
+/**
+ * Updates or removes thought overlays in the chat.
+ * Creates floating thought bubbles positioned near character avatars.
+ */
+export function updateChatThoughts() {
+ // console.log('[RPG Companion] ======== updateChatThoughts called ========');
+ // console.log('[RPG Companion] Extension enabled:', extensionSettings.enabled);
+ // console.log('[RPG Companion] showThoughtsInChat setting:', extensionSettings.showThoughtsInChat);
+ // console.log('[RPG Companion] Toggle element checked:', $('#rpg-toggle-thoughts-in-chat').prop('checked'));
+ // console.log('[RPG Companion] lastGeneratedData.characterThoughts:', lastGeneratedData.characterThoughts);
+
+ // Remove existing thought panel and icon
+ $('#rpg-thought-panel').remove();
+ $('#rpg-thought-icon').remove();
+ $('#chat').off('scroll.thoughtPanel');
+ $(window).off('resize.thoughtPanel');
+ $(document).off('click.thoughtPanel');
+
+ // If extension is disabled, thoughts in chat are disabled, or no thoughts, just return
+ if (!extensionSettings.enabled || !extensionSettings.showThoughtsInChat || !lastGeneratedData.characterThoughts) {
+ // console.log('[RPG Companion] Thoughts in chat disabled or no data');
+ return;
+ }
+
+ // Parse the Present Characters data to get thoughts
+ const lines = lastGeneratedData.characterThoughts.split('\n');
+ const thoughtsArray = []; // Array of {name, emoji, thought}
+
+ // console.log('[RPG Companion] Parsing thoughts from lines:', lines);
+
+ for (const line of lines) {
+ if (line.trim() &&
+ !line.includes('Present Characters') &&
+ !line.includes('---') &&
+ !line.trim().startsWith('```')) {
+
+ const parts = line.split('|').map(p => p.trim());
+ // console.log('[RPG Companion] Line parts:', parts);
+
+ if (parts.length >= 3) {
+ const firstPart = parts[0].trim();
+ const emojiMatch = firstPart.match(/^(.+?):\s*(.+)$/);
+
+ if (emojiMatch) {
+ const emoji = emojiMatch[1].trim();
+ const info = emojiMatch[2].trim();
+ const thoughts = parts[2] ? parts[2].trim() : '';
+
+ const infoParts = info.split(',').map(p => p.trim());
+ const name = infoParts[0] || '';
+
+ // console.log('[RPG Companion] Parsed thought - Name:', name, 'Thought:', thoughts);
+
+ if (name && thoughts && name.toLowerCase() !== 'unavailable') {
+ thoughtsArray.push({ name: name.toLowerCase(), emoji, thought: thoughts });
+ // console.log('[RPG Companion] Added to thoughtsArray:', name.toLowerCase());
+ }
+ }
+ }
+ }
+ }
+
+ // If no thoughts parsed, return
+ if (thoughtsArray.length === 0) {
+ // console.log('[RPG Companion] No thoughts parsed, returning');
+ return;
+ }
+
+ // console.log('[RPG Companion] Total thoughts:', thoughtsArray.length);
+ // console.log('[RPG Companion] Thoughts array:', thoughtsArray);
+
+ // Find the last message to position near
+ const $messages = $('#chat .mes');
+ let $targetMessage = null;
+
+ // Find the most recent non-user message
+ for (let i = $messages.length - 1; i >= 0; i--) {
+ const $message = $messages.eq(i);
+ if ($message.attr('is_user') !== 'true') {
+ $targetMessage = $message;
+ break;
+ }
+ }
+
+ if (!$targetMessage) {
+ // console.log('[RPG Companion] No target message found');
+ return;
+ }
+
+ // Create the thought panel with all thoughts
+ createThoughtPanel($targetMessage, thoughtsArray);
+}
+
+/**
+ * Creates or updates the floating thought panel positioned next to the character's avatar.
+ * Handles responsive positioning for left/right panel modes and mobile viewports.
+ *
+ * @param {jQuery} $message - Message element to position the panel relative to
+ * @param {Array} thoughtsArray - Array of thought objects {name, emoji, thought}
+ */
+export function createThoughtPanel($message, thoughtsArray) {
+ // Remove existing thought panel
+ $('#rpg-thought-panel').remove();
+ $('#rpg-thought-icon').remove();
+
+ // Get the avatar position from the message
+ const $avatar = $message.find('.avatar img');
+ if (!$avatar.length) {
+ // console.log('[RPG Companion] No avatar found in message');
+ return;
+ }
+
+ const avatarRect = $avatar[0].getBoundingClientRect();
+ const panelPosition = extensionSettings.panelPosition;
+ const theme = extensionSettings.theme;
+
+ // Build thought bubbles HTML
+ let thoughtsHtml = '';
+ thoughtsArray.forEach((thought, index) => {
+ thoughtsHtml += `
+
+
+ `;
+ }
+ html += '
+
+
+ ${relationshipEmoji}
+
+
+
+ ${char.emoji}
+ ${char.name}
+
+ ${char.traits}
+
+
+ `;
+ // Add divider between thoughts (except for last one)
+ if (index < thoughtsArray.length - 1) {
+ thoughtsHtml += '';
+ }
+ });
+
+ // Create the floating thought panel with theme
+ const $thoughtPanel = $(`
+
+ ${thought.emoji}
+
+
+ ${thought.thought}
+
+
+
+
+ `);
+
+ // Create the collapsed thought icon
+ const $thoughtIcon = $(`
+
+ `);
+
+ // Apply custom theme colors if custom theme
+ if (theme === 'custom') {
+ const customStyles = {
+ '--rpg-bg': extensionSettings.customColors.bg,
+ '--rpg-accent': extensionSettings.customColors.accent,
+ '--rpg-text': extensionSettings.customColors.text,
+ '--rpg-highlight': extensionSettings.customColors.highlight
+ };
+ $thoughtPanel.css(customStyles);
+ $thoughtIcon.css(customStyles);
+ }
+
+ // Force a consistent width for the bubble to ensure proper positioning
+ $thoughtPanel.css('width', '350px');
+
+ // Append to body so it's not clipped by chat container
+ $('body').append($thoughtPanel);
+ $('body').append($thoughtIcon);
+
+ // Position the panel next to the avatar
+ const panelWidth = 350;
+ const panelMargin = 20;
+
+ let top = avatarRect.top + (avatarRect.height / 2);
+ let left;
+ let right;
+ let useRightPosition = false;
+ let iconTop = avatarRect.top;
+ let iconLeft;
+
+ // Detect mobile viewport (matches CSS breakpoint)
+ const isMobile = window.innerWidth <= 1000;
+
+ if (isMobile) {
+ // On mobile: position icon horizontally centered on avatar
+ // The CSS transform will shift it upward by 60px
+ iconTop = avatarRect.top; // Start at avatar top (CSS will move it up)
+ iconLeft = avatarRect.left + (avatarRect.width / 2) - 18; // Centered horizontally (18px = half of 36px icon width)
+
+ // Center the thought panel horizontally on mobile
+ left = window.innerWidth / 2 - panelWidth / 2;
+ top = avatarRect.top + avatarRect.height + 60; // Position below icon with spacing
+
+ // No side-specific classes on mobile
+ $thoughtPanel.removeClass('rpg-thought-panel-left rpg-thought-panel-right');
+ $thoughtIcon.removeClass('rpg-thought-icon-left rpg-thought-icon-right');
+
+ console.log('[RPG Companion] Mobile thought icon positioning:', {
+ isMobile,
+ windowWidth: window.innerWidth,
+ avatarLeft: avatarRect.left,
+ avatarWidth: avatarRect.width,
+ iconLeft,
+ iconTop
+ });
+ } else if (panelPosition === 'left') {
+ // Main panel is on left, so thought bubble goes to RIGHT side
+ // Mirror the left side positioning: bubble should be same distance from avatar
+ // but on the opposite side, extending to the right
+ const chatContainer = $('#chat')[0];
+ const chatRect = chatContainer ? chatContainer.getBoundingClientRect() : { right: window.innerWidth };
+
+ // Position bubble starting from chat edge, extending right
+ left = chatRect.right + panelMargin; // Start at chat's right edge + margin
+ useRightPosition = false; // Use left positioning so it extends right
+ iconLeft = chatRect.right + 10; // Icon just at the chat edge
+ $thoughtPanel.addClass('rpg-thought-panel-right');
+ $thoughtIcon.addClass('rpg-thought-icon-right');
+
+ // Position circles to flow from left (toward chat/avatar) to right (toward panel)
+ $thoughtPanel.find('.rpg-thought-circles').css({
+ top: 'calc(50% - 50px)',
+ left: '-25px',
+ bottom: 'auto',
+ right: 'auto'
+ });
+ // Mirror the circle flow for right side (left-to-right)
+ $thoughtPanel.find('.rpg-thought-circles').css('align-items', 'flex-start');
+ $thoughtPanel.find('.rpg-circle-1').css({ 'align-self': 'flex-start', 'margin-right': '0', 'margin-left': '0' });
+ $thoughtPanel.find('.rpg-circle-2').css({ 'align-self': 'flex-start', 'margin-right': '0', 'margin-left': '4px' });
+ $thoughtPanel.find('.rpg-circle-3').css({ 'align-self': 'flex-start', 'margin-right': '0', 'margin-left': '8px' });
+ } else {
+ // Main panel is on right, so thought bubble goes on left (near avatar)
+ left = avatarRect.left - panelWidth - panelMargin;
+ iconLeft = avatarRect.left - 40;
+ $thoughtPanel.addClass('rpg-thought-panel-left');
+ $thoughtIcon.addClass('rpg-thought-icon-left');
+
+ // Position circles to flow from avatar (left) to bubble (more left)
+ // Circles should flow right-to-left when bubble is on left
+ $thoughtPanel.find('.rpg-thought-circles').css({
+ top: 'calc(50% - 50px)',
+ right: '-25px',
+ bottom: 'auto',
+ left: 'auto'
+ });
+ // Keep the circle flow for left side (right-to-left) - default from CSS
+ $thoughtPanel.find('.rpg-thought-circles').css('align-items', 'flex-end');
+ $thoughtPanel.find('.rpg-circle-1').css({ 'align-self': 'flex-end', 'margin-left': '0', 'margin-right': '0' });
+ $thoughtPanel.find('.rpg-circle-2').css({ 'align-self': 'flex-end', 'margin-left': '0', 'margin-right': '4px' });
+ $thoughtPanel.find('.rpg-circle-3').css({ 'align-self': 'flex-end', 'margin-left': '0', 'margin-right': '8px' });
+ }
+
+ if (useRightPosition) {
+ $thoughtPanel.css({
+ top: `${top}px`,
+ right: `${right}px`,
+ left: 'auto' // Clear left positioning
+ });
+ } else {
+ $thoughtPanel.css({
+ top: `${top}px`,
+ left: `${left}px`,
+ right: 'auto' // Clear right positioning
+ });
+ }
+
+ $thoughtIcon.css({
+ top: `${iconTop}px`,
+ left: `${iconLeft}px`,
+ right: 'auto' // Clear any right positioning
+ });
+
+ // Initially hide the panel and show the icon
+ $thoughtPanel.hide();
+ $thoughtIcon.show();
+
+ // console.log('[RPG Companion] Thought panel created at:', { top, left });
+
+ // Close button functionality
+ $thoughtPanel.find('.rpg-thought-close').on('click', function(e) {
+ e.stopPropagation();
+ $thoughtPanel.fadeOut(200);
+ $thoughtIcon.fadeIn(200);
+ });
+
+ // Icon click to show panel
+ $thoughtIcon.on('click', function(e) {
+ e.stopPropagation();
+ $thoughtIcon.fadeOut(200);
+ $thoughtPanel.fadeIn(200);
+ });
+
+ // Add event handlers for editable thoughts in the bubble
+ $thoughtPanel.find('.rpg-editable').on('blur', function() {
+ const character = $(this).data('character');
+ const field = $(this).data('field');
+ const value = $(this).text().trim();
+ // console.log('[RPG Companion] 💭 Thought bubble blur event - character:', character, 'field:', field, 'value:', value);
+ updateCharacterField(character, field, value);
+ });
+
+ // RAF throttling for smooth position updates
+ let positionUpdateRaf = null;
+
+ // Update position on scroll with RAF throttling
+ const updatePanelPosition = () => {
+ if (!$message.is(':visible')) {
+ $thoughtPanel.hide();
+ $thoughtIcon.hide();
+ return;
+ }
+
+ // Cancel any pending RAF
+ if (positionUpdateRaf) {
+ cancelAnimationFrame(positionUpdateRaf);
+ }
+
+ // Schedule update on next frame
+ positionUpdateRaf = requestAnimationFrame(() => {
+ const newAvatarRect = $avatar[0].getBoundingClientRect();
+ const newTop = newAvatarRect.top + (newAvatarRect.height / 2);
+ const newIconTop = newAvatarRect.top;
+ let newLeft, newIconLeft;
+
+ if (panelPosition === 'left') {
+ // Position at chat's right edge, extending right
+ const chatContainer = $('#chat')[0];
+ const chatRect = chatContainer ? chatContainer.getBoundingClientRect() : { right: window.innerWidth };
+ newLeft = chatRect.right + panelMargin;
+ newIconLeft = chatRect.right + 10;
+
+ $thoughtPanel.css({
+ top: `${newTop}px`,
+ left: `${newLeft}px`,
+ right: 'auto'
+ });
+ } else {
+ // Left position relative to avatar
+ newLeft = newAvatarRect.left - panelWidth - panelMargin;
+ newIconLeft = newAvatarRect.left - 40;
+
+ $thoughtPanel.css({
+ top: `${newTop}px`,
+ left: `${newLeft}px`,
+ right: 'auto'
+ });
+ }
+
+ $thoughtIcon.css({
+ top: `${newIconTop}px`,
+ left: `${newIconLeft}px`,
+ right: 'auto'
+ });
+
+ if ($thoughtPanel.is(':visible')) {
+ $thoughtPanel.show();
+ }
+ if ($thoughtIcon.is(':visible')) {
+ $thoughtIcon.show();
+ }
+
+ positionUpdateRaf = null;
+ });
+ };
+
+ // Update position on scroll and resize
+ $('#chat').on('scroll.thoughtPanel', updatePanelPosition);
+ $(window).on('resize.thoughtPanel', updatePanelPosition);
+
+ // Remove panel when clicking outside (but not when clicking icon or panel)
+ $(document).on('click.thoughtPanel', function(e) {
+ if (!$(e.target).closest('#rpg-thought-panel, #rpg-thought-icon').length) {
+ // Hide the panel and show the icon instead of removing
+ $thoughtPanel.fadeOut(200);
+ $thoughtIcon.fadeIn(200);
+ }
+ });
+}
diff --git a/src/systems/rendering/userStats.js b/src/systems/rendering/userStats.js
new file mode 100644
index 0000000..6b907fb
--- /dev/null
+++ b/src/systems/rendering/userStats.js
@@ -0,0 +1,223 @@
+/**
+ * User Stats Rendering Module
+ * Handles rendering of the user stats panel with progress bars and classic RPG stats
+ */
+
+import { getContext } from '../../../../../../extensions.js';
+import { user_avatar } from '../../../../../../../script.js';
+import {
+ extensionSettings,
+ lastGeneratedData,
+ $userStatsContainer,
+ FALLBACK_AVATAR_DATA_URI
+} from '../../core/state.js';
+import {
+ saveSettings,
+ saveChatData,
+ updateMessageSwipeData
+} from '../../core/persistence.js';
+import { getSafeThumbnailUrl } from '../../utils/avatars.js';
+
+/**
+ * Renders the user stats panel with health bars, mood, inventory, and classic stats.
+ * Includes event listeners for editable fields.
+ */
+export function renderUserStats() {
+ if (!extensionSettings.showUserStats || !$userStatsContainer) {
+ return;
+ }
+
+ const stats = extensionSettings.userStats;
+ const userName = getContext().name1;
+
+ // Initialize lastGeneratedData.userStats if it doesn't exist
+ if (!lastGeneratedData.userStats) {
+ lastGeneratedData.userStats = `Health: ${stats.health}%\nSatiety: ${stats.satiety}%\nEnergy: ${stats.energy}%\nHygiene: ${stats.hygiene}%\nArousal: ${stats.arousal}%\n${stats.mood}: ${stats.conditions}\nInventory: ${stats.inventory}`;
+ }
+
+ // Get user portrait - handle both default-user and custom persona folders
+ // Use a base64-encoded SVG placeholder as fallback to avoid 400 errors
+ let userPortrait = FALLBACK_AVATAR_DATA_URI;
+
+ if (user_avatar) {
+ // Try to get the thumbnail using our safe helper
+ const thumbnailUrl = getSafeThumbnailUrl('persona', user_avatar);
+ if (thumbnailUrl) {
+ userPortrait = thumbnailUrl;
+ }
+ }
+
+ // Create gradient from low to high color
+ const gradient = `linear-gradient(to right, ${extensionSettings.statBarColorLow}, ${extensionSettings.statBarColorHigh})`;
+
+ const html = `
+
+
+
+
+
+
+ ${thoughtsHtml}
+
+
+
+ `;
+
+ $userStatsContainer.html(html);
+
+ // Add event listeners for editable stat values
+ $('.rpg-editable-stat').on('blur', function() {
+ const field = $(this).data('field');
+ const textValue = $(this).text().replace('%', '').trim();
+ let value = parseInt(textValue);
+
+ // Validate and clamp value between 0 and 100
+ if (isNaN(value)) {
+ value = 0;
+ }
+ value = Math.max(0, Math.min(100, value));
+
+ // Update the setting
+ extensionSettings.userStats[field] = value;
+
+ // Also update lastGeneratedData to keep it in sync
+ if (!lastGeneratedData.userStats) {
+ lastGeneratedData.userStats = '';
+ }
+ // Regenerate the userStats text with updated value
+ const statsText = `Health: ${extensionSettings.userStats.health}%\nSatiety: ${extensionSettings.userStats.satiety}%\nEnergy: ${extensionSettings.userStats.energy}%\nHygiene: ${extensionSettings.userStats.hygiene}%\nArousal: ${extensionSettings.userStats.arousal}%\n${extensionSettings.userStats.mood}: ${extensionSettings.userStats.conditions}\nInventory: ${extensionSettings.userStats.inventory}`;
+ lastGeneratedData.userStats = statsText;
+
+ saveSettings();
+ saveChatData();
+ updateMessageSwipeData();
+
+ // Re-render to update the bar
+ renderUserStats();
+ });
+
+ // Add event listeners for mood/conditions editing
+ $('.rpg-mood-emoji.rpg-editable').on('blur', function() {
+ const value = $(this).text().trim();
+ extensionSettings.userStats.mood = value || '😐';
+
+ // Update lastGeneratedData
+ const statsText = `Health: ${extensionSettings.userStats.health}%\nSatiety: ${extensionSettings.userStats.satiety}%\nEnergy: ${extensionSettings.userStats.energy}%\nHygiene: ${extensionSettings.userStats.hygiene}%\nArousal: ${extensionSettings.userStats.arousal}%\n${extensionSettings.userStats.mood}: ${extensionSettings.userStats.conditions}\nInventory: ${extensionSettings.userStats.inventory}`;
+ lastGeneratedData.userStats = statsText;
+
+ saveSettings();
+ saveChatData();
+ updateMessageSwipeData();
+ });
+
+ $('.rpg-mood-conditions.rpg-editable').on('blur', function() {
+ const value = $(this).text().trim();
+ extensionSettings.userStats.conditions = value || 'None';
+
+ // Update lastGeneratedData
+ const statsText = `Health: ${extensionSettings.userStats.health}%\nSatiety: ${extensionSettings.userStats.satiety}%\nEnergy: ${extensionSettings.userStats.energy}%\nHygiene: ${extensionSettings.userStats.hygiene}%\nArousal: ${extensionSettings.userStats.arousal}%\n${extensionSettings.userStats.mood}: ${extensionSettings.userStats.conditions}\nInventory: ${extensionSettings.userStats.inventory}`;
+ lastGeneratedData.userStats = statsText;
+
+ saveSettings();
+ saveChatData();
+ updateMessageSwipeData();
+ });
+}
diff --git a/src/systems/ui/desktop.js b/src/systems/ui/desktop.js
new file mode 100644
index 0000000..2b8e2a4
--- /dev/null
+++ b/src/systems/ui/desktop.js
@@ -0,0 +1,139 @@
+/**
+ * Desktop UI Module
+ * Handles desktop-specific UI functionality: tab navigation
+ */
+
+/**
+ * Sets up desktop tab navigation for organizing content.
+ * Only runs on desktop viewports (>1000px).
+ * Creates two tabs: Status (Stats/Info/Thoughts) and Inventory.
+ */
+export function setupDesktopTabs() {
+ const isDesktop = window.innerWidth > 1000;
+ if (!isDesktop) return;
+
+ // Check if tabs already exist
+ if ($('.rpg-tabs-nav').length > 0) return;
+
+ const $contentBox = $('.rpg-content-box');
+
+ // Get existing sections
+ const $userStats = $('#rpg-user-stats');
+ const $infoBox = $('#rpg-info-box');
+ const $thoughts = $('#rpg-thoughts');
+ const $inventory = $('#rpg-inventory');
+
+ // If no sections exist, nothing to organize
+ if ($userStats.length === 0 && $infoBox.length === 0 && $thoughts.length === 0 && $inventory.length === 0) {
+ return;
+ }
+
+ // Create tab navigation
+ const $tabNav = $(`
+
+
+
+
+
+
+
+
+
+
+ Health:
+
+ ${stats.health}%
+
+
+
+ Satiety:
+
+ ${stats.satiety}%
+
+
+
+ Energy:
+
+ ${stats.energy}%
+
+
+
+ Hygiene:
+
+ ${stats.hygiene}%
+
+
+
+ Arousal:
+
+ ${stats.arousal}%
+
+
+
+ ${stats.mood}
+ ${stats.conditions}
+
+
+
+
+
+
+
+ STR
+
+
+
+ DEX
+
+
+
+ CON
+
+
+
+ INT
+
+
+
+ WIS
+
+
+
+ CHA
+
+
+
+
+
+
+ `);
+
+ // Create tab content containers
+ const $statusTab = $('');
+ const $inventoryTab = $('');
+
+ // Move sections into their respective tabs (detach to preserve event handlers)
+ if ($userStats.length > 0) {
+ $statusTab.append($userStats.detach());
+ $userStats.show();
+ }
+ if ($infoBox.length > 0) {
+ $statusTab.append($infoBox.detach());
+ $infoBox.show();
+ }
+ if ($thoughts.length > 0) {
+ $statusTab.append($thoughts.detach());
+ $thoughts.show();
+ }
+ if ($inventory.length > 0) {
+ $inventoryTab.append($inventory.detach());
+ $inventory.show();
+ }
+
+ // Hide dividers on desktop tabs (tabs separate content naturally)
+ $('.rpg-divider').hide();
+
+ // Build desktop tab structure
+ const $tabsContainer = $('');
+ $tabsContainer.append($tabNav);
+ $tabsContainer.append($statusTab);
+ $tabsContainer.append($inventoryTab);
+
+ // Replace content box with tabs container
+ $contentBox.html('').append($tabsContainer);
+
+ // Handle tab switching
+ $tabNav.find('.rpg-tab-btn').on('click', function() {
+ const tabName = $(this).data('tab');
+
+ // Update active tab button
+ $tabNav.find('.rpg-tab-btn').removeClass('active');
+ $(this).addClass('active');
+
+ // Update active tab content
+ $('.rpg-tab-content').removeClass('active');
+ $(`.rpg-tab-content[data-tab-content="${tabName}"]`).addClass('active');
+ });
+
+ console.log('[RPG Desktop] Desktop tabs initialized');
+}
+
+/**
+ * Removes desktop tab navigation and restores original layout.
+ * Used when transitioning from desktop to mobile.
+ */
+export function removeDesktopTabs() {
+ // Get sections from tabs before removing
+ const $userStats = $('#rpg-user-stats').detach();
+ const $infoBox = $('#rpg-info-box').detach();
+ const $thoughts = $('#rpg-thoughts').detach();
+ const $inventory = $('#rpg-inventory').detach();
+
+ // Remove tabs container
+ $('.rpg-tabs-container').remove();
+
+ // Get dividers
+ const $dividerStats = $('#rpg-divider-stats');
+ const $dividerInfo = $('#rpg-divider-info');
+ const $dividerThoughts = $('#rpg-divider-thoughts');
+
+ // Restore original sections to content box in correct order
+ const $contentBox = $('.rpg-content-box');
+
+ // Re-insert sections in original order: User Stats, Info Box, Thoughts, Inventory
+ if ($dividerStats.length) {
+ $dividerStats.before($userStats);
+ $dividerInfo.before($infoBox);
+ $dividerThoughts.before($thoughts);
+ $contentBox.append($inventory);
+ } else {
+ // Fallback if dividers don't exist
+ $contentBox.append($userStats);
+ $contentBox.append($infoBox);
+ $contentBox.append($thoughts);
+ $contentBox.append($inventory);
+ }
+
+ // Show sections and dividers
+ $userStats.show();
+ $infoBox.show();
+ $thoughts.show();
+ $inventory.show();
+ $('.rpg-divider').show();
+
+ console.log('[RPG Desktop] Desktop tabs removed');
+}
diff --git a/src/systems/ui/layout.js b/src/systems/ui/layout.js
new file mode 100644
index 0000000..9993154
--- /dev/null
+++ b/src/systems/ui/layout.js
@@ -0,0 +1,276 @@
+/**
+ * Layout Management Module
+ * Handles panel visibility, section visibility, collapse/expand toggle, and panel positioning
+ */
+
+import {
+ extensionSettings,
+ $panelContainer,
+ $userStatsContainer,
+ $infoBoxContainer,
+ $thoughtsContainer,
+ $inventoryContainer
+} from '../../core/state.js';
+
+/**
+ * Toggles the visibility of plot buttons based on settings.
+ */
+export function togglePlotButtons() {
+ if (extensionSettings.enablePlotButtons && extensionSettings.enabled) {
+ $('#rpg-plot-buttons').show();
+ } else {
+ $('#rpg-plot-buttons').hide();
+ }
+}
+
+/**
+ * Helper function to close the mobile panel with animation.
+ */
+export function closeMobilePanelWithAnimation() {
+ const $panel = $('#rpg-companion-panel');
+ const $mobileToggle = $('#rpg-mobile-toggle');
+
+ // Add closing class to trigger slide-out animation
+ $panel.removeClass('rpg-mobile-open').addClass('rpg-mobile-closing');
+ $mobileToggle.removeClass('active');
+
+ // Wait for animation to complete before hiding
+ $panel.one('animationend', function() {
+ $panel.removeClass('rpg-mobile-closing');
+ $('.rpg-mobile-overlay').remove();
+ });
+}
+
+/**
+ * Updates the collapse toggle icon direction based on panel position.
+ */
+export function updateCollapseToggleIcon() {
+ const $collapseToggle = $('#rpg-collapse-toggle');
+ const $panel = $('#rpg-companion-panel');
+ const $icon = $collapseToggle.find('i');
+ const isMobile = window.innerWidth <= 1000;
+
+ if (isMobile) {
+ // Mobile: slides from right, use same icon logic as desktop right panel
+ const isOpen = $panel.hasClass('rpg-mobile-open');
+ console.log('[RPG Mobile] updateCollapseToggleIcon:', {
+ isMobile: true,
+ isOpen,
+ settingIcon: isOpen ? 'chevron-left' : 'chevron-right'
+ });
+ if (isOpen) {
+ // Panel open - chevron points left (to close/slide back right)
+ $icon.removeClass('fa-chevron-down fa-chevron-up fa-chevron-right').addClass('fa-chevron-left');
+ } else {
+ // Panel closed - chevron points right (to open/slide in from right)
+ $icon.removeClass('fa-chevron-down fa-chevron-up fa-chevron-left').addClass('fa-chevron-right');
+ }
+ } else {
+ // Desktop: icon direction based on panel position and collapsed state
+ const isCollapsed = $panel.hasClass('rpg-collapsed');
+
+ if (isCollapsed) {
+ // When collapsed, arrow points inward (to expand)
+ if ($panel.hasClass('rpg-position-right')) {
+ $icon.removeClass('fa-chevron-right').addClass('fa-chevron-left');
+ } else if ($panel.hasClass('rpg-position-left')) {
+ $icon.removeClass('fa-chevron-left').addClass('fa-chevron-right');
+ }
+ } else {
+ // When expanded, arrow points outward (to collapse)
+ if ($panel.hasClass('rpg-position-right')) {
+ $icon.removeClass('fa-chevron-left').addClass('fa-chevron-right');
+ } else if ($panel.hasClass('rpg-position-left')) {
+ $icon.removeClass('fa-chevron-right').addClass('fa-chevron-left');
+ }
+ }
+ }
+}
+
+/**
+ * Sets up the collapse/expand toggle button for side panels.
+ */
+export function setupCollapseToggle() {
+ const $collapseToggle = $('#rpg-collapse-toggle');
+ const $panel = $('#rpg-companion-panel');
+ const $icon = $collapseToggle.find('i');
+
+ $collapseToggle.on('click', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+
+ const isMobile = window.innerWidth <= 1000;
+
+ // On mobile: button toggles panel open/closed (same as desktop behavior)
+ if (isMobile) {
+ const isOpen = $panel.hasClass('rpg-mobile-open');
+ console.log('[RPG Mobile] Collapse toggle clicked. Current state:', {
+ isOpen,
+ panelClasses: $panel.attr('class'),
+ inlineStyles: $panel.attr('style'),
+ panelPosition: {
+ top: $panel.css('top'),
+ bottom: $panel.css('bottom'),
+ transform: $panel.css('transform'),
+ visibility: $panel.css('visibility')
+ }
+ });
+
+ if (isOpen) {
+ // Close panel with animation
+ console.log('[RPG Mobile] Closing panel');
+ closeMobilePanelWithAnimation();
+ } else {
+ // Open panel
+ console.log('[RPG Mobile] Opening panel');
+ $panel.addClass('rpg-mobile-open');
+ const $overlay = $('');
+ $('body').append($overlay);
+
+ // Debug: Check state after animation should complete
+ setTimeout(() => {
+ console.log('[RPG Mobile] 500ms after opening:', {
+ panelClasses: $panel.attr('class'),
+ hasOpenClass: $panel.hasClass('rpg-mobile-open'),
+ visibility: $panel.css('visibility'),
+ transform: $panel.css('transform'),
+ display: $panel.css('display'),
+ opacity: $panel.css('opacity')
+ });
+ }, 500);
+
+ // Close when clicking overlay
+ $overlay.on('click', function() {
+ console.log('[RPG Mobile] Overlay clicked - closing panel');
+ closeMobilePanelWithAnimation();
+ updateCollapseToggleIcon();
+ });
+ }
+
+ // Update icon to reflect new state
+ updateCollapseToggleIcon();
+
+ console.log('[RPG Mobile] After toggle:', {
+ panelClasses: $panel.attr('class'),
+ inlineStyles: $panel.attr('style'),
+ panelPosition: {
+ top: $panel.css('top'),
+ bottom: $panel.css('bottom'),
+ transform: $panel.css('transform'),
+ visibility: $panel.css('visibility')
+ },
+ gameContainer: {
+ opacity: $('.rpg-game-container').css('opacity'),
+ visibility: $('.rpg-game-container').css('visibility')
+ }
+ });
+ return;
+ }
+
+ // Desktop behavior: collapse/expand side panel
+ const isCollapsed = $panel.hasClass('rpg-collapsed');
+
+ if (isCollapsed) {
+ // Expand panel
+ $panel.removeClass('rpg-collapsed');
+
+ // Update icon based on position
+ if ($panel.hasClass('rpg-position-right')) {
+ $icon.removeClass('fa-chevron-left').addClass('fa-chevron-right');
+ } else if ($panel.hasClass('rpg-position-left')) {
+ $icon.removeClass('fa-chevron-right').addClass('fa-chevron-left');
+ }
+ } else {
+ // Collapse panel
+ $panel.addClass('rpg-collapsed');
+
+ // Update icon based on position
+ if ($panel.hasClass('rpg-position-right')) {
+ $icon.removeClass('fa-chevron-right').addClass('fa-chevron-left');
+ } else if ($panel.hasClass('rpg-position-left')) {
+ $icon.removeClass('fa-chevron-left').addClass('fa-chevron-right');
+ }
+ }
+ });
+
+ // Set initial icon direction based on panel position
+ updateCollapseToggleIcon();
+}
+
+/**
+ * Updates the visibility of the entire panel.
+ */
+export function updatePanelVisibility() {
+ if (extensionSettings.enabled) {
+ $panelContainer.show();
+ togglePlotButtons(); // Update plot button visibility
+ } else {
+ $panelContainer.hide();
+ $('#rpg-plot-buttons').hide(); // Hide plot buttons when disabled
+ }
+}
+
+/**
+ * Updates the visibility of individual sections.
+ */
+export function updateSectionVisibility() {
+ // Show/hide sections based on settings
+ $userStatsContainer.toggle(extensionSettings.showUserStats);
+ $infoBoxContainer.toggle(extensionSettings.showInfoBox);
+ $thoughtsContainer.toggle(extensionSettings.showCharacterThoughts);
+ if ($inventoryContainer) {
+ $inventoryContainer.toggle(extensionSettings.showInventory);
+ }
+
+ // Show/hide dividers intelligently
+ // Divider after User Stats: shown if User Stats is visible AND at least one section after it is visible
+ const showDividerAfterStats = extensionSettings.showUserStats &&
+ (extensionSettings.showInfoBox || extensionSettings.showCharacterThoughts || extensionSettings.showInventory);
+ $('#rpg-divider-stats').toggle(showDividerAfterStats);
+
+ // Divider after Info Box: shown if Info Box is visible AND at least one section after it is visible
+ const showDividerAfterInfo = extensionSettings.showInfoBox &&
+ (extensionSettings.showCharacterThoughts || extensionSettings.showInventory);
+ $('#rpg-divider-info').toggle(showDividerAfterInfo);
+
+ // Divider after Thoughts: shown if Thoughts is visible AND Inventory is visible
+ const showDividerAfterThoughts = extensionSettings.showCharacterThoughts &&
+ extensionSettings.showInventory;
+ $('#rpg-divider-thoughts').toggle(showDividerAfterThoughts);
+}
+
+/**
+ * Applies the selected panel position.
+ */
+export function applyPanelPosition() {
+ if (!$panelContainer) return;
+
+ const isMobile = window.innerWidth <= 1000;
+
+ // Remove all position classes
+ $panelContainer.removeClass('rpg-position-left rpg-position-right rpg-position-top');
+
+ // On mobile, don't apply desktop position classes
+ if (isMobile) {
+ return;
+ }
+
+ // Desktop: Add the appropriate position class
+ $panelContainer.addClass(`rpg-position-${extensionSettings.panelPosition}`);
+
+ // Update collapse toggle icon direction for new position
+ updateCollapseToggleIcon();
+}
+
+/**
+ * Updates the UI based on generation mode selection.
+ */
+export function updateGenerationModeUI() {
+ if (extensionSettings.generationMode === 'together') {
+ // In "together" mode, manual update button is hidden
+ $('#rpg-manual-update').hide();
+ } else {
+ // In "separate" mode, manual update button is visible
+ $('#rpg-manual-update').show();
+ }
+}
diff --git a/src/systems/ui/mobile.js b/src/systems/ui/mobile.js
new file mode 100644
index 0000000..f2648b3
--- /dev/null
+++ b/src/systems/ui/mobile.js
@@ -0,0 +1,718 @@
+/**
+ * Mobile UI Module
+ * Handles mobile-specific UI functionality: FAB dragging, tabs, keyboard handling
+ */
+
+import { extensionSettings } from '../../core/state.js';
+import { saveSettings } from '../../core/persistence.js';
+import { closeMobilePanelWithAnimation, updateCollapseToggleIcon } from './layout.js';
+import { setupDesktopTabs, removeDesktopTabs } from './desktop.js';
+
+/**
+ * Sets up the mobile toggle button (FAB) with drag functionality.
+ * Handles touch/mouse events for positioning and panel toggling.
+ */
+export function setupMobileToggle() {
+ const $mobileToggle = $('#rpg-mobile-toggle');
+ const $panel = $('#rpg-companion-panel');
+ const $overlay = $('');
+
+ // DIAGNOSTIC: Check if elements exist and log setup state
+ console.log('[RPG Mobile] ========================================');
+ console.log('[RPG Mobile] setupMobileToggle called');
+ console.log('[RPG Mobile] Button exists:', $mobileToggle.length > 0, 'jQuery object:', $mobileToggle);
+ console.log('[RPG Mobile] Panel exists:', $panel.length > 0);
+ console.log('[RPG Mobile] Window width:', window.innerWidth);
+ console.log('[RPG Mobile] Is mobile viewport (<=1000):', window.innerWidth <= 1000);
+ console.log('[RPG Mobile] ========================================');
+
+ if ($mobileToggle.length === 0) {
+ console.error('[RPG Mobile] ERROR: Mobile toggle button not found in DOM!');
+ console.error('[RPG Mobile] Cannot attach event handlers - button does not exist');
+ return; // Exit early if button doesn't exist
+ }
+
+ // Load and apply saved FAB position
+ if (extensionSettings.mobileFabPosition) {
+ const pos = extensionSettings.mobileFabPosition;
+ console.log('[RPG Mobile] Loading saved FAB position:', pos);
+
+ // Apply saved position
+ if (pos.top) $mobileToggle.css('top', pos.top);
+ if (pos.right) $mobileToggle.css('right', pos.right);
+ if (pos.bottom) $mobileToggle.css('bottom', pos.bottom);
+ if (pos.left) $mobileToggle.css('left', pos.left);
+
+ // Constrain to viewport after position is applied
+ requestAnimationFrame(() => constrainFabToViewport());
+ }
+
+ // Touch/drag state
+ let isDragging = false;
+ let touchStartTime = 0;
+ let touchStartX = 0;
+ let touchStartY = 0;
+ let buttonStartX = 0;
+ let buttonStartY = 0;
+ const LONG_PRESS_DURATION = 200; // ms to hold before enabling drag
+ const MOVE_THRESHOLD = 10; // px to move before enabling drag
+ let rafId = null; // RequestAnimationFrame ID for smooth updates
+ let pendingX = null;
+ let pendingY = null;
+
+ // Update position using requestAnimationFrame for smooth rendering
+ function updateFabPosition() {
+ if (pendingX !== null && pendingY !== null) {
+ $mobileToggle.css({
+ left: pendingX + 'px',
+ top: pendingY + 'px',
+ right: 'auto',
+ bottom: 'auto'
+ });
+ pendingX = null;
+ pendingY = null;
+ }
+ rafId = null;
+ }
+
+ // Touch start - begin tracking
+ $mobileToggle.on('touchstart', function(e) {
+ const touch = e.originalEvent.touches[0];
+
+ touchStartTime = Date.now();
+ touchStartX = touch.clientX;
+ touchStartY = touch.clientY;
+
+ const offset = $mobileToggle.offset();
+ buttonStartX = offset.left;
+ buttonStartY = offset.top;
+
+ isDragging = false;
+ });
+
+ // Touch move - check if should start dragging
+ $mobileToggle.on('touchmove', function(e) {
+ const touch = e.originalEvent.touches[0];
+ const deltaX = touch.clientX - touchStartX;
+ const deltaY = touch.clientY - touchStartY;
+ const timeSinceStart = Date.now() - touchStartTime;
+ const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+ // Start dragging if held long enough OR moved far enough
+ if (!isDragging && (timeSinceStart > LONG_PRESS_DURATION || distance > MOVE_THRESHOLD)) {
+ isDragging = true;
+ $mobileToggle.addClass('dragging'); // Disable transitions while dragging
+ }
+
+ if (isDragging) {
+ e.preventDefault(); // Prevent scrolling while dragging
+
+ // Calculate new position
+ let newX = buttonStartX + deltaX;
+ let newY = buttonStartY + deltaY;
+
+ // Get button dimensions
+ const buttonWidth = $mobileToggle.outerWidth();
+ const buttonHeight = $mobileToggle.outerHeight();
+
+ // Constrain to viewport with 10px padding
+ const minX = 10;
+ const maxX = window.innerWidth - buttonWidth - 10;
+ const minY = 10;
+ const maxY = window.innerHeight - buttonHeight - 10;
+
+ newX = Math.max(minX, Math.min(maxX, newX));
+ newY = Math.max(minY, Math.min(maxY, newY));
+
+ // Store pending position and request animation frame for smooth update
+ pendingX = newX;
+ pendingY = newY;
+ if (!rafId) {
+ rafId = requestAnimationFrame(updateFabPosition);
+ }
+ }
+ });
+
+ // Mouse drag support for desktop
+ let mouseDown = false;
+
+ $mobileToggle.on('mousedown', function(e) {
+ // Prevent default to avoid text selection
+ e.preventDefault();
+
+ touchStartTime = Date.now();
+ touchStartX = e.clientX;
+ touchStartY = e.clientY;
+
+ const offset = $mobileToggle.offset();
+ buttonStartX = offset.left;
+ buttonStartY = offset.top;
+
+ isDragging = false;
+ mouseDown = true;
+ });
+
+ // Mouse move - only track if mouse is down
+ $(document).on('mousemove', function(e) {
+ if (!mouseDown) return;
+
+ const deltaX = e.clientX - touchStartX;
+ const deltaY = e.clientY - touchStartY;
+ const timeSinceStart = Date.now() - touchStartTime;
+ const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+ // Start dragging if held long enough OR moved far enough
+ if (!isDragging && (timeSinceStart > LONG_PRESS_DURATION || distance > MOVE_THRESHOLD)) {
+ isDragging = true;
+ $mobileToggle.addClass('dragging'); // Disable transitions while dragging
+ }
+
+ if (isDragging) {
+ e.preventDefault();
+
+ // Calculate new position
+ let newX = buttonStartX + deltaX;
+ let newY = buttonStartY + deltaY;
+
+ // Get button dimensions
+ const buttonWidth = $mobileToggle.outerWidth();
+ const buttonHeight = $mobileToggle.outerHeight();
+
+ // Constrain to viewport with 10px padding
+ const minX = 10;
+ const maxX = window.innerWidth - buttonWidth - 10;
+ const minY = 10;
+ const maxY = window.innerHeight - buttonHeight - 10;
+
+ newX = Math.max(minX, Math.min(maxX, newX));
+ newY = Math.max(minY, Math.min(maxY, newY));
+
+ // Store pending position and request animation frame for smooth update
+ pendingX = newX;
+ pendingY = newY;
+ if (!rafId) {
+ rafId = requestAnimationFrame(updateFabPosition);
+ }
+ }
+ });
+
+ // Mouse up - save position or let click handler toggle
+ $(document).on('mouseup', function(e) {
+ if (!mouseDown) return;
+
+ mouseDown = false;
+
+ if (isDragging) {
+ // Was dragging - save new position
+ const offset = $mobileToggle.offset();
+ const newPosition = {
+ left: offset.left + 'px',
+ top: offset.top + 'px'
+ };
+
+ extensionSettings.mobileFabPosition = newPosition;
+ saveSettings();
+
+ console.log('[RPG Mobile] Saved new FAB position (mouse):', newPosition);
+
+ // Constrain to viewport bounds (now that position is saved)
+ setTimeout(() => constrainFabToViewport(), 10);
+
+ // Re-enable transitions with smooth animation
+ setTimeout(() => {
+ $mobileToggle.removeClass('dragging');
+ }, 50);
+
+ isDragging = false;
+
+ // Prevent click from firing after drag
+ e.preventDefault();
+ e.stopPropagation();
+
+ // Add flag to prevent click handler from firing
+ $mobileToggle.data('just-dragged', true);
+ setTimeout(() => {
+ $mobileToggle.data('just-dragged', false);
+ }, 100);
+ }
+ // If not dragging, let the click handler toggle the panel
+ });
+
+ // Touch end - save position or toggle panel
+ $mobileToggle.on('touchend', function(e) {
+ // TEMPORARILY COMMENTED FOR DIAGNOSIS - might be blocking click fallback
+ // e.preventDefault();
+
+ if (isDragging) {
+ // Was dragging - save new position
+ const offset = $mobileToggle.offset();
+ const newPosition = {
+ left: offset.left + 'px',
+ top: offset.top + 'px'
+ };
+
+ extensionSettings.mobileFabPosition = newPosition;
+ saveSettings();
+
+ console.log('[RPG Mobile] Saved new FAB position:', newPosition);
+
+ // Constrain to viewport bounds (now that position is saved)
+ setTimeout(() => constrainFabToViewport(), 10);
+
+ // Re-enable transitions with smooth animation
+ setTimeout(() => {
+ $mobileToggle.removeClass('dragging');
+ }, 50);
+
+ isDragging = false;
+ } else {
+ // Was a tap - toggle panel
+ console.log('[RPG Mobile] Quick tap detected - toggling panel');
+
+ if ($panel.hasClass('rpg-mobile-open')) {
+ // Close panel with animation
+ closeMobilePanelWithAnimation();
+ } else {
+ // Open panel
+ $panel.addClass('rpg-mobile-open');
+ $('body').append($overlay);
+ $mobileToggle.addClass('active');
+
+ // Close when clicking overlay
+ $overlay.on('click', function() {
+ closeMobilePanelWithAnimation();
+ });
+ }
+ }
+ });
+
+ // Click handler - works on both mobile and desktop
+ $mobileToggle.on('click', function(e) {
+ // Skip if we just finished dragging
+ if ($mobileToggle.data('just-dragged')) {
+ console.log('[RPG Mobile] Click blocked - just finished dragging');
+ return;
+ }
+
+ console.log('[RPG Mobile] >>> CLICK EVENT FIRED <<<', {
+ windowWidth: window.innerWidth,
+ isMobileViewport: window.innerWidth <= 1000,
+ panelOpen: $panel.hasClass('rpg-mobile-open')
+ });
+
+ // Work on both mobile and desktop (removed viewport check)
+ if ($panel.hasClass('rpg-mobile-open')) {
+ console.log('[RPG Mobile] Click: Closing panel');
+ closeMobilePanelWithAnimation();
+ } else {
+ console.log('[RPG Mobile] Click: Opening panel');
+ $panel.addClass('rpg-mobile-open');
+ $('body').append($overlay);
+ $mobileToggle.addClass('active');
+
+ $overlay.on('click', function() {
+ console.log('[RPG Mobile] Overlay clicked - closing panel');
+ closeMobilePanelWithAnimation();
+ });
+ }
+ });
+
+ // Handle viewport resize to manage desktop/mobile transitions
+ let wasMobile = window.innerWidth <= 1000;
+ let resizeTimer;
+
+ $(window).on('resize', function() {
+ clearTimeout(resizeTimer);
+
+ const isMobile = window.innerWidth <= 1000;
+ const $panel = $('#rpg-companion-panel');
+ const $mobileToggle = $('#rpg-mobile-toggle');
+
+ // Transitioning from desktop to mobile - handle immediately for smooth transition
+ if (!wasMobile && isMobile) {
+ console.log('[RPG Mobile] Transitioning desktop -> mobile');
+
+ // Remove desktop tabs first
+ removeDesktopTabs();
+
+ // Remove desktop positioning classes
+ $panel.removeClass('rpg-position-right rpg-position-left rpg-position-top');
+
+ // Clear collapsed state - mobile doesn't use collapse
+ $panel.removeClass('rpg-collapsed');
+
+ // Close panel on mobile with animation
+ closeMobilePanelWithAnimation();
+
+ // Clear any inline styles that might be overriding CSS
+ $panel.attr('style', '');
+
+ console.log('[RPG Mobile] After cleanup:', {
+ panelClasses: $panel.attr('class'),
+ inlineStyles: $panel.attr('style'),
+ panelPosition: {
+ top: $panel.css('top'),
+ bottom: $panel.css('bottom'),
+ transform: $panel.css('transform'),
+ visibility: $panel.css('visibility')
+ }
+ });
+
+ // Set up mobile tabs IMMEDIATELY (no debounce delay)
+ setupMobileTabs();
+
+ // Update icon for mobile state
+ updateCollapseToggleIcon();
+
+ wasMobile = isMobile;
+ return;
+ }
+
+ // For mobile to desktop transition, use debounce
+ resizeTimer = setTimeout(function() {
+ const isMobile = window.innerWidth <= 1000;
+
+ // Transitioning from mobile to desktop
+ if (wasMobile && !isMobile) {
+ // Disable transitions to prevent left→right slide animation
+ $panel.css('transition', 'none');
+
+ $panel.removeClass('rpg-mobile-open rpg-mobile-closing');
+ $mobileToggle.removeClass('active');
+ $('.rpg-mobile-overlay').remove();
+
+ // Restore desktop positioning class
+ const position = extensionSettings.panelPosition || 'right';
+ $panel.addClass('rpg-position-' + position);
+
+ // Remove mobile tabs structure
+ removeMobileTabs();
+
+ // Setup desktop tabs
+ setupDesktopTabs();
+
+ // Force reflow to apply position instantly
+ $panel[0].offsetHeight;
+
+ // Re-enable transitions after positioned
+ setTimeout(function() {
+ $panel.css('transition', '');
+ }, 50);
+ }
+
+ wasMobile = isMobile;
+
+ // Constrain FAB to viewport after resize (only if user has positioned it)
+ constrainFabToViewport();
+ }, 150); // Debounce only for mobile→desktop
+ });
+
+ // Initialize mobile tabs if starting on mobile
+ const isMobile = window.innerWidth <= 1000;
+ if (isMobile) {
+ const $panel = $('#rpg-companion-panel');
+ // Clear any inline styles
+ $panel.attr('style', '');
+
+ console.log('[RPG Mobile] Initial load on mobile viewport:', {
+ panelClasses: $panel.attr('class'),
+ inlineStyles: $panel.attr('style'),
+ panelPosition: {
+ top: $panel.css('top'),
+ bottom: $panel.css('top'),
+ transform: $panel.css('transform'),
+ visibility: $panel.css('visibility')
+ }
+ });
+ setupMobileTabs();
+ // Set initial icon for mobile
+ updateCollapseToggleIcon();
+ }
+}
+
+/**
+ * Constrains the mobile FAB button to viewport bounds with top-bar awareness.
+ * Only runs when button is in user-controlled state (mobileFabPosition exists).
+ * Ensures button never goes behind the top bar or outside viewport edges.
+ */
+export function constrainFabToViewport() {
+ // Only constrain if user has set a custom position
+ if (!extensionSettings.mobileFabPosition) {
+ console.log('[RPG Mobile] Skipping viewport constraint - using CSS defaults');
+ return;
+ }
+
+ const $mobileToggle = $('#rpg-mobile-toggle');
+ if ($mobileToggle.length === 0) return;
+
+ // Skip if button is not visible
+ if (!$mobileToggle.is(':visible')) {
+ console.log('[RPG Mobile] Skipping viewport constraint - button not visible');
+ return;
+ }
+
+ // Get current position
+ const offset = $mobileToggle.offset();
+ if (!offset) return;
+
+ let currentX = offset.left;
+ let currentY = offset.top;
+
+ const buttonWidth = $mobileToggle.outerWidth();
+ const buttonHeight = $mobileToggle.outerHeight();
+
+ // Get top bar height from CSS variable (fallback to 50px if not set)
+ const topBarHeight = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--topBarBlockSize')) || 50;
+
+ // Calculate viewport bounds with padding
+ // Use top bar height + extra padding for top bound
+ const minX = 10;
+ const maxX = window.innerWidth - buttonWidth - 10;
+ const minY = topBarHeight + 60; // Top bar + extra space for visibility
+ const maxY = window.innerHeight - buttonHeight - 10;
+
+ // Constrain to bounds
+ let newX = Math.max(minX, Math.min(maxX, currentX));
+ let newY = Math.max(minY, Math.min(maxY, currentY));
+
+ // Only update if position changed
+ if (newX !== currentX || newY !== currentY) {
+ console.log('[RPG Mobile] Constraining FAB to viewport:', {
+ old: { x: currentX, y: currentY },
+ new: { x: newX, y: newY },
+ viewport: { width: window.innerWidth, height: window.innerHeight },
+ topBarHeight
+ });
+
+ // Apply new position
+ $mobileToggle.css({
+ left: newX + 'px',
+ top: newY + 'px',
+ right: 'auto',
+ bottom: 'auto'
+ });
+
+ // Save corrected position
+ extensionSettings.mobileFabPosition = {
+ left: newX + 'px',
+ top: newY + 'px'
+ };
+ saveSettings();
+ }
+}
+
+/**
+ * Sets up mobile tab navigation for organizing content.
+ * Only runs on mobile viewports (<=1000px).
+ */
+export function setupMobileTabs() {
+ const isMobile = window.innerWidth <= 1000;
+ if (!isMobile) return;
+
+ // Check if tabs already exist
+ if ($('.rpg-mobile-tabs').length > 0) return;
+
+ const $panel = $('#rpg-companion-panel');
+ const $contentBox = $panel.find('.rpg-content-box');
+
+ // Get existing sections
+ const $userStats = $('#rpg-user-stats');
+ const $infoBox = $('#rpg-info-box');
+ const $thoughts = $('#rpg-thoughts');
+ const $inventory = $('#rpg-inventory');
+
+ // If no sections exist, nothing to organize
+ if ($userStats.length === 0 && $infoBox.length === 0 && $thoughts.length === 0 && $inventory.length === 0) {
+ return;
+ }
+
+ // Create tab navigation (3 tabs for mobile)
+ const tabs = [];
+ const hasStats = $userStats.length > 0;
+ const hasInfo = $infoBox.length > 0 || $thoughts.length > 0;
+ const hasInventory = $inventory.length > 0;
+
+ // Tab 1: Stats (User Stats only)
+ if (hasStats) {
+ tabs.push('');
+ }
+ // Tab 2: Info (Info Box + Character Thoughts)
+ if (hasInfo) {
+ tabs.push('');
+ }
+ // Tab 3: Inventory
+ if (hasInventory) {
+ tabs.push('');
+ }
+
+ const $tabNav = $('' + tabs.join('') + '
');
+
+ // Determine which tab should be active
+ let firstTab = '';
+ if (hasStats) firstTab = 'stats';
+ else if (hasInfo) firstTab = 'info';
+ else if (hasInventory) firstTab = 'inventory';
+
+ // Create tab content wrappers
+ const $statsTab = $('');
+ const $infoTab = $('');
+ const $inventoryTab = $('');
+
+ // Move sections into their respective tabs (detach to preserve event handlers)
+ // Stats tab: User Stats only
+ if ($userStats.length > 0) {
+ $statsTab.append($userStats.detach());
+ $userStats.show();
+ }
+
+ // Info tab: Info Box + Character Thoughts
+ if ($infoBox.length > 0) {
+ $infoTab.append($infoBox.detach());
+ $infoBox.show();
+ }
+ if ($thoughts.length > 0) {
+ $infoTab.append($thoughts.detach());
+ $thoughts.show();
+ }
+
+ // Inventory tab: Inventory only
+ if ($inventory.length > 0) {
+ $inventoryTab.append($inventory.detach());
+ $inventory.show();
+ }
+
+ // Hide dividers on mobile
+ $('.rpg-divider').hide();
+
+ // Build mobile tab structure
+ const $mobileContainer = $('');
+ $mobileContainer.append($tabNav);
+
+ // Only append tab content wrappers that have content
+ if (hasStats) $mobileContainer.append($statsTab);
+ if (hasInfo) $mobileContainer.append($infoTab);
+ if (hasInventory) $mobileContainer.append($inventoryTab);
+
+ // Insert mobile tab structure at the beginning of content box
+ $contentBox.prepend($mobileContainer);
+
+ // Handle tab switching
+ $tabNav.find('.rpg-mobile-tab').on('click', function() {
+ const tabName = $(this).data('tab');
+
+ // Update active tab button
+ $tabNav.find('.rpg-mobile-tab').removeClass('active');
+ $(this).addClass('active');
+
+ // Update active tab content
+ $mobileContainer.find('.rpg-mobile-tab-content').removeClass('active');
+ $mobileContainer.find('[data-tab-content="' + tabName + '"]').addClass('active');
+ });
+}
+
+/**
+ * Removes mobile tab navigation and restores desktop layout.
+ */
+export function removeMobileTabs() {
+ // Get sections from tabs before removing
+ const $userStats = $('#rpg-user-stats').detach();
+ const $infoBox = $('#rpg-info-box').detach();
+ const $thoughts = $('#rpg-thoughts').detach();
+ const $inventory = $('#rpg-inventory').detach();
+
+ // Remove mobile tab container
+ $('.rpg-mobile-container').remove();
+
+ // Get dividers
+ const $dividerStats = $('#rpg-divider-stats');
+ const $dividerInfo = $('#rpg-divider-info');
+ const $dividerThoughts = $('#rpg-divider-thoughts');
+
+ // Restore original sections to content box in correct order
+ const $contentBox = $('.rpg-content-box');
+
+ // Re-insert sections in original order: User Stats, Info Box, Thoughts, Inventory
+ if ($dividerStats.length) {
+ $dividerStats.before($userStats);
+ $dividerInfo.before($infoBox);
+ $dividerThoughts.before($thoughts);
+ $contentBox.append($inventory);
+ } else {
+ // Fallback if dividers don't exist
+ $contentBox.prepend($inventory);
+ $contentBox.prepend($thoughts);
+ $contentBox.prepend($infoBox);
+ $contentBox.prepend($userStats);
+ }
+
+ // Show sections and dividers
+ $userStats.show();
+ $infoBox.show();
+ $thoughts.show();
+ $inventory.show();
+ $('.rpg-divider').show();
+}
+
+/**
+ * Sets up mobile keyboard handling using Visual Viewport API.
+ * Prevents layout squashing when keyboard appears by detecting
+ * viewport changes and adding CSS classes for adjustment.
+ */
+export function setupMobileKeyboardHandling() {
+ if (!window.visualViewport) {
+ // console.log('[RPG Mobile] Visual Viewport API not supported');
+ return;
+ }
+
+ const $panel = $('#rpg-companion-panel');
+ let keyboardVisible = false;
+
+ // Listen for viewport resize (keyboard show/hide)
+ window.visualViewport.addEventListener('resize', () => {
+ // Only handle if panel is open on mobile
+ if (!$panel.hasClass('rpg-mobile-open')) return;
+
+ const viewportHeight = window.visualViewport.height;
+ const windowHeight = window.innerHeight;
+
+ // Keyboard visible if viewport significantly smaller than window
+ // Using 75% threshold to account for browser UI variations
+ const isKeyboardShowing = viewportHeight < windowHeight * 0.75;
+
+ if (isKeyboardShowing && !keyboardVisible) {
+ // Keyboard just appeared
+ keyboardVisible = true;
+ $panel.addClass('rpg-keyboard-visible');
+ // console.log('[RPG Mobile] Keyboard opened');
+ } else if (!isKeyboardShowing && keyboardVisible) {
+ // Keyboard just disappeared
+ keyboardVisible = false;
+ $panel.removeClass('rpg-keyboard-visible');
+ // console.log('[RPG Mobile] Keyboard closed');
+ }
+ });
+}
+
+/**
+ * Handles focus on contenteditable fields to ensure they're visible when keyboard appears.
+ * Uses smooth scrolling to bring focused field into view with proper padding.
+ */
+export function setupContentEditableScrolling() {
+ const $panel = $('#rpg-companion-panel');
+
+ // Use event delegation for all contenteditable fields
+ $panel.on('focusin', '[contenteditable="true"]', function(e) {
+ const $field = $(this);
+
+ // Small delay to let keyboard animate in
+ setTimeout(() => {
+ // Scroll field into view with padding
+ // Using 'center' to ensure field is in middle of viewport
+ $field[0].scrollIntoView({
+ behavior: 'smooth',
+ block: 'center',
+ inline: 'nearest'
+ });
+ }, 300);
+ });
+}
diff --git a/src/systems/ui/modals.js b/src/systems/ui/modals.js
new file mode 100644
index 0000000..51b1827
--- /dev/null
+++ b/src/systems/ui/modals.js
@@ -0,0 +1,500 @@
+/**
+ * Modal Management Module
+ * Handles DiceModal and SettingsModal ES6 classes with state management
+ */
+
+import { getContext } from '../../../../../../extensions.js';
+import {
+ extensionSettings,
+ lastGeneratedData,
+ committedTrackerData,
+ $infoBoxContainer,
+ $thoughtsContainer,
+ setPendingDiceRoll,
+ getPendingDiceRoll
+} from '../../core/state.js';
+import { saveSettings, saveChatData } from '../../core/persistence.js';
+import { renderUserStats } from '../rendering/userStats.js';
+import { updateChatThoughts } from '../rendering/thoughts.js';
+import {
+ rollDice as rollDiceCore,
+ clearDiceRoll as clearDiceRollCore,
+ updateDiceDisplay as updateDiceDisplayCore,
+ addDiceQuickReply as addDiceQuickReplyCore
+} from '../features/dice.js';
+
+/**
+ * Modern DiceModal ES6 Class
+ * Manages dice roller modal with proper state management and CSS classes
+ */
+export class DiceModal {
+ constructor() {
+ this.modal = document.getElementById('rpg-dice-popup');
+ this.animation = document.getElementById('rpg-dice-animation');
+ this.result = document.getElementById('rpg-dice-result');
+ this.resultValue = document.getElementById('rpg-dice-result-value');
+ this.resultDetails = document.getElementById('rpg-dice-result-details');
+ this.rollBtn = document.getElementById('rpg-dice-roll-btn');
+
+ this.state = 'IDLE'; // IDLE, ROLLING, SHOWING_RESULT
+ this.isAnimating = false;
+ }
+
+ /**
+ * Opens the modal with proper animation
+ */
+ open() {
+ if (this.isAnimating) return;
+
+ // Apply theme
+ const theme = extensionSettings.theme;
+ this.modal.setAttribute('data-theme', theme);
+
+ // Apply custom theme if needed
+ if (theme === 'custom') {
+ this._applyCustomTheme();
+ }
+
+ // Reset to initial state
+ this._setState('IDLE');
+
+ // Open modal with CSS class
+ this.modal.classList.add('is-open');
+ this.modal.classList.remove('is-closing');
+
+ // Focus management
+ this.modal.querySelector('#rpg-dice-popup-close')?.focus();
+ }
+
+ /**
+ * Closes the modal with animation
+ */
+ close() {
+ if (this.isAnimating) return;
+
+ this.isAnimating = true;
+ this.modal.classList.add('is-closing');
+ this.modal.classList.remove('is-open');
+
+ // Wait for animation to complete
+ setTimeout(() => {
+ this.modal.classList.remove('is-closing');
+ this.isAnimating = false;
+
+ // Clear pending roll
+ setPendingDiceRoll(null);
+ }, 200);
+ }
+
+ /**
+ * Starts the rolling animation
+ */
+ startRolling() {
+ this._setState('ROLLING');
+ }
+
+ /**
+ * Shows the result
+ * @param {number} total - The total roll value
+ * @param {Array
+
+
@@ -159,6 +167,11 @@
Show Present Characters
+
+