mirror of
https://github.com/mattjaybe/SillyTavern-EchoChamber.git
synced 2026-04-28 03:20:39 +00:00
Add paused state, fix enable/disable, and restore pop-out option
- Added separate 'paused' state for power button (keeps panel visible but stops generation) - Settings checkbox now fully enables/disables extension (hides/shows panel) - Panel now stays hidden after refresh when disabled via settings - Removed toastr notifications for pause/unpause - Restored Pop Out option in panel's layout menu - Fixed pop-out to properly open window instead of hiding panel - Added CSS for disabled visual state (50% opacity on content, hidden LIVE indicator)
This commit is contained in:
Spicy_Marinara
parent
ec4a1b821c
commit
1151848512
5 changed files with 3394 additions and 2696 deletions
|
|
@ -5,6 +5,15 @@
|
|||
|
||||
## 🆕 What's New
|
||||
|
||||
### ***v4.2.0***
|
||||
- **Pop-out window**: Open the chat in a separate window to move to another screen
|
||||
- **Improved panel controls**: Power button now truly enables/disables the extension (hides panel AND stops generation). Separate collapse arrow for just hiding the panel
|
||||
- **Include Summary**: Option to include chat summary from the Summarize extension
|
||||
- **Include World Info**: Option to include active World Info/Lorebook entries
|
||||
- **Include Persona/Character**: Options to include persona and character descriptions in context (thanks to leDissolution!)
|
||||
- **Style dropdown fix**: Menu now opens upward when panel is at bottom position
|
||||
- **Livestream resume**: Messages continue rolling after page refresh
|
||||
|
||||
### ***ver4.1.4***
|
||||
- Increased max token limit calculations by user counts to prevent cut-offs.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"display_name": "EchoChamber",
|
||||
"loading_order": 1000,
|
||||
"requires": [],
|
||||
"optional": [],
|
||||
"js": "index.js",
|
||||
"css": "style.css",
|
||||
"author": "Antigravity",
|
||||
"version": "4.1.4",
|
||||
"homePage": "https://github.com/mattjaybe/SillyTavern-EchoChamber",
|
||||
"auto_update": true
|
||||
}
|
||||
{
|
||||
"display_name": "EchoChamber",
|
||||
"loading_order": 1000,
|
||||
"requires": [],
|
||||
"optional": [],
|
||||
"js": "index.js",
|
||||
"css": "style.css",
|
||||
"author": "Antigravity",
|
||||
"version": "4.2.0",
|
||||
"homePage": "https://github.com/mattjaybe/SillyTavern-EchoChamber",
|
||||
"auto_update": true
|
||||
}
|
||||
|
|
|
|||
641
settings.html
641
settings.html
|
|
@ -1,303 +1,338 @@
|
|||
<div class="discord_settings">
|
||||
<div class="inline-drawer">
|
||||
<div class="inline-drawer-toggle inline-drawer-header">
|
||||
<b>EchoChamber</b>
|
||||
<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
|
||||
</div>
|
||||
<div class="inline-drawer-content">
|
||||
<!-- Header Section -->
|
||||
<div
|
||||
style="margin-bottom: 12px; padding: 8px 12px; border-left: 3px solid var(--SmartThemeQuoteColor); background: rgba(0,0,0,0.15); border-radius: 0 4px 4px 0; font-size: 0.9em; opacity: 0.85;">
|
||||
Fake chat feed that reacts dynamically to conversation context.
|
||||
</div>
|
||||
|
||||
<!-- Global Enable -->
|
||||
<label class="checkbox_label" for="discord_enabled"
|
||||
style="display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 12px;">
|
||||
<input id="discord_enabled" type="checkbox" class="checkbox">
|
||||
<span style="font-weight: bold;">Enable EchoChamber</span>
|
||||
</label>
|
||||
|
||||
<hr style="margin: 10px 0; opacity: 0.2;">
|
||||
|
||||
<!-- Generation Engine Section -->
|
||||
<div style="margin-bottom: 16px;">
|
||||
<h4
|
||||
style="margin: 0 0 8px 0; font-size: 0.8em; text-transform: uppercase; color: var(--SmartThemeQuoteColor); display: flex; align-items: center; gap: 6px; letter-spacing: 0.5px;">
|
||||
<i class="fa-solid fa-microchip"></i> Generation Engine
|
||||
</h4>
|
||||
|
||||
<select id="discord_source" class="text_pole" style="width: 100%; margin-bottom: 8px;">
|
||||
<option value="default">Default (Main API)</option>
|
||||
<option value="profile">Connection Profile (Recommended)</option>
|
||||
<option value="ollama">Ollama (Local)</option>
|
||||
<option value="openai">OpenAI Compatible</option>
|
||||
</select>
|
||||
|
||||
<!-- Provider: Ollama -->
|
||||
<div id="discord_ollama_settings"
|
||||
style="display:none; padding: 10px; border-left: 3px solid rgba(0,255,0,0.4); background: rgba(0,255,0,0.03); border-radius: 0 6px 6px 0; margin-top: 4px;">
|
||||
<div style="font-size: 0.8em; font-weight: bold; margin-bottom: 8px; opacity: 0.9;">
|
||||
<i class="fa-solid fa-terminal"></i> Ollama
|
||||
</div>
|
||||
<input id="discord_url" type="text" class="text_pole" placeholder="http://localhost:11434"
|
||||
title="Ollama API endpoint" style="margin-bottom: 6px; font-size: 0.85em;">
|
||||
<select id="discord_model_select" class="text_pole" style="font-size: 0.85em;"></select>
|
||||
<div id="discord_ollama_status" style="font-size: 0.8em; margin-top: 6px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Provider: OpenAI Compatible -->
|
||||
<div id="discord_openai_settings"
|
||||
style="display:none; padding: 10px; border-left: 3px solid rgba(0,180,255,0.4); background: rgba(0,180,255,0.03); border-radius: 0 6px 6px 0; margin-top: 4px;">
|
||||
<div style="font-size: 0.8em; font-weight: bold; margin-bottom: 8px; opacity: 0.9;">
|
||||
<i class="fa-solid fa-cloud"></i> OpenAI Compatible
|
||||
</div>
|
||||
<select id="discord_openai_preset" class="text_pole" style="margin-bottom: 6px; font-size: 0.85em;">
|
||||
<option value="custom">Custom</option>
|
||||
<option value="lmstudio">LM Studio (:1234)</option>
|
||||
<option value="kobold">KoboldCPP (:5001)</option>
|
||||
<option value="textgen">TextGenWebUI (:5000)</option>
|
||||
<option value="vllm">vLLM (:8000)</option>
|
||||
</select>
|
||||
<input id="discord_openai_url" type="text" class="text_pole" placeholder="http://localhost:1234/v1"
|
||||
title="API endpoint URL" style="margin-bottom: 6px; font-size: 0.85em;">
|
||||
<input id="discord_openai_key" type="password" class="text_pole" placeholder="API Key (Optional)"
|
||||
title="API Key (if required)" style="margin-bottom: 6px; font-size: 0.85em;">
|
||||
<input id="discord_openai_model" type="text" class="text_pole" placeholder="Model name"
|
||||
title="Model identifier" style="font-size: 0.85em;">
|
||||
</div>
|
||||
|
||||
<!-- Provider: Connection Profile -->
|
||||
<div id="discord_profile_settings"
|
||||
style="display:none; padding: 10px; border-left: 3px solid rgba(100,150,255,0.4); background: rgba(100,150,255,0.03); border-radius: 0 6px 6px 0; margin-top: 4px;">
|
||||
<div style="font-size: 0.8em; font-weight: bold; margin-bottom: 8px; opacity: 0.9;">
|
||||
<i class="fa-solid fa-link"></i> Connection Profile
|
||||
</div>
|
||||
<select id="discord_preset_select" class="text_pole" style="font-size: 0.85em;"></select>
|
||||
<div style="font-size: 0.75em; opacity: 0.6; margin-top: 6px;">
|
||||
<i class="fa-solid fa-shield-halved"></i> Uses your existing ST credentials securely.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin: 10px 0; opacity: 0.2;">
|
||||
|
||||
<!-- Content Settings Section -->
|
||||
<div style="margin-bottom: 16px;">
|
||||
<h4
|
||||
style="margin: 0 0 8px 0; font-size: 0.8em; text-transform: uppercase; color: var(--SmartThemeQuoteColor); display: flex; align-items: center; gap: 6px; letter-spacing: 0.5px;">
|
||||
<i class="fa-solid fa-sliders"></i> Content Settings
|
||||
</h4>
|
||||
|
||||
<!-- Row 1: Style + Position -->
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px;">
|
||||
<div>
|
||||
<label for="discord_style"
|
||||
style="display: block; font-size: 0.8em; margin-bottom: 3px; opacity: 0.8;">
|
||||
<i class="fa-solid fa-palette" style="width: 14px;"></i> Style
|
||||
</label>
|
||||
<select id="discord_style" class="text_pole" style="width: 100%; font-size: 0.85em;">
|
||||
<option value="twitch">Discord/Twitch</option>
|
||||
<option value="verbose">Thoughtful</option>
|
||||
<option value="twitter">Twitter/X</option>
|
||||
<option value="news">Breaking News</option>
|
||||
<option value="mst3k">MST3K</option>
|
||||
<option value="nsfw_ava">Ava NSFW</option>
|
||||
<option value="nsfw_kai">Kai NSFW</option>
|
||||
<option value="hypebot">HypeBot</option>
|
||||
<option value="doomscrollers">Doomscrollers</option>
|
||||
<option value="dumbanddumber">Dumb & Dumber</option>
|
||||
<option value="ao3wattpad">AO3 / Wattpad</option>
|
||||
<option value="custom">Custom</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="discord_position"
|
||||
style="display: block; font-size: 0.8em; margin-bottom: 3px; opacity: 0.8;">
|
||||
<i class="fa-solid fa-arrows-up-down-left-right" style="width: 14px;"></i> Position
|
||||
</label>
|
||||
<select id="discord_position" class="text_pole" style="width: 100%; font-size: 0.85em;">
|
||||
<option value="bottom">Bottom</option>
|
||||
<option value="top">Top</option>
|
||||
<option value="left">Left</option>
|
||||
<option value="right">Right</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 2: Users + Font + Opacity -->
|
||||
<div
|
||||
style="display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 8px; margin-bottom: 12px; align-items: end;">
|
||||
<div>
|
||||
<label for="discord_user_count"
|
||||
style="display: block; font-size: 0.8em; margin-bottom: 3px; opacity: 0.8;">
|
||||
<i class="fa-solid fa-users" style="width: 14px;"></i> Users
|
||||
</label>
|
||||
<input id="discord_user_count" type="number" class="text_pole" min="1" max="20" value="5"
|
||||
style="width: 100%; font-size: 0.85em;" title="Number of fake users (1-20)">
|
||||
</div>
|
||||
<div>
|
||||
<label for="discord_font_size"
|
||||
style="display: block; font-size: 0.8em; margin-bottom: 3px; opacity: 0.8;">
|
||||
<i class="fa-solid fa-font" style="width: 14px;"></i> Font
|
||||
</label>
|
||||
<input id="discord_font_size" type="number" class="text_pole" min="8" max="32" value="15"
|
||||
style="width: 100%; font-size: 0.85em;" title="Font size in pixels">
|
||||
</div>
|
||||
<div>
|
||||
<label style="display: block; font-size: 0.8em; margin-bottom: 3px; opacity: 0.8;">
|
||||
<i class="fa-solid fa-eye" style="width: 14px;"></i> Opacity
|
||||
</label>
|
||||
<div style="display: flex; align-items: center; gap: 6px;">
|
||||
<input id="discord_opacity" type="range" class="slider" min="10" max="100" value="80"
|
||||
step="5" style="flex-grow: 1;">
|
||||
<span id="discord_opacity_val"
|
||||
style="font-size: 0.8em; min-width: 32px; text-align: right;">80%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Auto-update On Messages -->
|
||||
<div style="padding: 10px; background: rgba(0,0,0,0.1); border-radius: 6px; margin-bottom: 10px;">
|
||||
<label class="checkbox_label" for="discord_auto_update"
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
||||
<input id="discord_auto_update" type="checkbox" class="checkbox">
|
||||
<span style="font-size: 0.9em;"><i class="fa-solid fa-sync"
|
||||
style="width: 16px; opacity: 0.8;"></i> Auto-update On Messages</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Include Chat History -->
|
||||
<div style="padding: 10px; background: rgba(0,0,0,0.1); border-radius: 6px; margin-bottom: 10px;">
|
||||
<label class="checkbox_label" for="discord_include_user"
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
||||
<input id="discord_include_user" type="checkbox" class="checkbox">
|
||||
<span style="font-size: 0.9em;"><i class="fa-solid fa-comments"
|
||||
style="width: 16px; opacity: 0.8;"></i> Include Chat History</span>
|
||||
</label>
|
||||
<div id="discord_context_depth_container"
|
||||
style="margin-top: 8px; margin-left: 24px; display: none;">
|
||||
<label for="discord_context_depth"
|
||||
style="font-size: 0.8em; opacity: 0.8; display: block; margin-bottom: 4px;">
|
||||
Context Depth:
|
||||
</label>
|
||||
<input id="discord_context_depth" type="number" class="text_pole" min="2" max="20" value="4"
|
||||
style="width: 80px; font-size: 0.85em;" title="Number of messages to include">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include Past Generated EchoChambers -->
|
||||
<div style="padding: 10px; background: rgba(0,0,0,0.1); border-radius: 6px; margin-bottom: 10px;">
|
||||
<label class="checkbox_label" for="discord_include_past_echo"
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
||||
<input id="discord_include_past_echo" type="checkbox" class="checkbox">
|
||||
<span style="font-size: 0.9em;"><i class="fa-solid fa-layer-group"
|
||||
style="width: 16px; opacity: 0.8;"></i> Include Past Generated EchoChambers</span>
|
||||
</label>
|
||||
<div style="margin-top: 6px; margin-left: 24px; font-size: 0.75em; opacity: 0.6;">
|
||||
Includes previous commentary in the prompt for new generations
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Livestream Mode -->
|
||||
<div style="padding: 10px; background: rgba(0,0,0,0.1); border-radius: 6px;">
|
||||
<label class="checkbox_label" for="discord_livestream"
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
||||
<input id="discord_livestream" type="checkbox" class="checkbox">
|
||||
<span style="font-size: 0.9em;"><i class="fa-solid fa-tower-broadcast"
|
||||
style="width: 16px; opacity: 0.8;"></i> Livestream</span>
|
||||
</label>
|
||||
<div style="margin-top: 6px; margin-left: 24px; font-size: 0.75em; opacity: 0.6;">
|
||||
Instead of displaying the entire chat feed at once, simulate a "livestream" by showing messages
|
||||
appear in the panel over time
|
||||
</div>
|
||||
|
||||
<!-- Livestream Settings -->
|
||||
<div id="discord_livestream_settings" style="margin-top: 10px; margin-left: 24px; display: none;">
|
||||
<!-- Batch Size -->
|
||||
<div style="margin-bottom: 10px;">
|
||||
<label for="discord_livestream_batch_size"
|
||||
style="font-size: 0.8em; opacity: 0.8; display: block; margin-bottom: 4px;">
|
||||
<i class="fa-solid fa-boxes-stacked" style="width: 14px;"></i> Batch Size:
|
||||
</label>
|
||||
<input id="discord_livestream_batch_size" type="number" class="text_pole" min="5" max="50"
|
||||
value="20" style="width: 80px; font-size: 0.85em;"
|
||||
title="Number of messages to generate per batch">
|
||||
</div>
|
||||
|
||||
<!-- Wait Time Range -->
|
||||
<div style="margin-bottom: 10px;">
|
||||
<label for="discord_livestream_min_wait"
|
||||
style="font-size: 0.8em; opacity: 0.8; display: block; margin-bottom: 4px;">
|
||||
<i class="fa-solid fa-clock" style="width: 14px;"></i> Minimum Wait Time (seconds):
|
||||
</label>
|
||||
<input id="discord_livestream_min_wait" type="number" class="text_pole" min="1" max="120"
|
||||
value="5" style="width: 80px; font-size: 0.85em;"
|
||||
title="Minimum seconds to wait between messages">
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 10px;">
|
||||
<label for="discord_livestream_max_wait"
|
||||
style="font-size: 0.8em; opacity: 0.8; display: block; margin-bottom: 4px;">
|
||||
<i class="fa-solid fa-clock" style="width: 14px;"></i> Maximum Wait Time (seconds):
|
||||
</label>
|
||||
<input id="discord_livestream_max_wait" type="number" class="text_pole" min="1" max="300"
|
||||
value="60" style="width: 80px; font-size: 0.85em;"
|
||||
title="Maximum seconds to wait between messages">
|
||||
</div>
|
||||
|
||||
<!-- Generation Mode -->
|
||||
<div style="margin-bottom: 8px;">
|
||||
<label style="font-size: 0.8em; opacity: 0.8; display: block; margin-bottom: 6px;">
|
||||
<i class="fa-solid fa-clapperboard" style="width: 14px;"></i> Generation Mode:
|
||||
</label>
|
||||
<label class="checkbox_label"
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 4px;">
|
||||
<input type="radio" name="discord_livestream_mode" value="manual" class="radio"
|
||||
id="discord_livestream_manual" checked>
|
||||
<span style="font-size: 0.85em;">Manual Upon Clicking Regenerate Chat</span>
|
||||
</label>
|
||||
<label class="checkbox_label"
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 4px;">
|
||||
<input type="radio" name="discord_livestream_mode" value="onMessage" class="radio"
|
||||
id="discord_livestream_onmessage">
|
||||
<span style="font-size: 0.85em;">Generate Upon Receiving A New Message</span>
|
||||
</label>
|
||||
<label class="checkbox_label"
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
||||
<input type="radio" name="discord_livestream_mode" value="onComplete" class="radio"
|
||||
id="discord_livestream_oncomplete">
|
||||
<span style="font-size: 0.85em;">Generate A New Batch After The Last One Finishes</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin: 10px 0; opacity: 0.2;">
|
||||
|
||||
<!-- Style Manager Section -->
|
||||
<div>
|
||||
<h4
|
||||
style="margin: 0 0 8px 0; font-size: 0.8em; text-transform: uppercase; color: var(--SmartThemeQuoteColor); display: flex; align-items: center; gap: 6px; letter-spacing: 0.5px;">
|
||||
<i class="fa-solid fa-folder-tree"></i> Style Manager
|
||||
</h4>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<button id="discord_open_style_editor" class="menu_button">
|
||||
<i class="fa-solid fa-palette"></i> Manage
|
||||
</button>
|
||||
<button id="discord_import_btn" class="menu_button">
|
||||
<i class="fa-solid fa-file-import"></i> Import
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="text-align: center; margin-top: 8px; font-size: 0.75em; opacity: 0.5; font-family: monospace;">
|
||||
v4.1.2
|
||||
</div>
|
||||
<input type="file" id="discord_import_file" accept=".md" style="display:none;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="discord_settings">
|
||||
<div class="inline-drawer">
|
||||
<div class="inline-drawer-toggle inline-drawer-header">
|
||||
<b>EchoChamber</b>
|
||||
<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
|
||||
</div>
|
||||
<div class="inline-drawer-content">
|
||||
<!-- Header Section -->
|
||||
<div
|
||||
style="margin-bottom: 12px; padding: 8px 12px; border-left: 3px solid var(--SmartThemeQuoteColor); background: rgba(0,0,0,0.15); border-radius: 0 4px 4px 0; font-size: 0.9em; opacity: 0.85;">
|
||||
Fake chat feed that reacts dynamically to conversation context.
|
||||
</div>
|
||||
|
||||
<!-- Global Enable -->
|
||||
<label class="checkbox_label" for="discord_enabled"
|
||||
style="display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 12px;">
|
||||
<input id="discord_enabled" type="checkbox" class="checkbox">
|
||||
<span style="font-weight: bold;">Enable EchoChamber</span>
|
||||
</label>
|
||||
|
||||
<hr style="margin: 10px 0; opacity: 0.2;">
|
||||
|
||||
<!-- Generation Engine Section -->
|
||||
<div style="margin-bottom: 16px;">
|
||||
<h4
|
||||
style="margin: 0 0 8px 0; font-size: 0.8em; text-transform: uppercase; color: var(--SmartThemeQuoteColor); display: flex; align-items: center; gap: 6px; letter-spacing: 0.5px;">
|
||||
<i class="fa-solid fa-microchip"></i> Generation Engine
|
||||
</h4>
|
||||
|
||||
<select id="discord_source" class="text_pole" style="width: 100%; margin-bottom: 8px;">
|
||||
<option value="default">Default (Main API)</option>
|
||||
<option value="profile">Connection Profile (Recommended)</option>
|
||||
<option value="ollama">Ollama (Local)</option>
|
||||
<option value="openai">OpenAI Compatible</option>
|
||||
</select>
|
||||
|
||||
<!-- Provider: Ollama -->
|
||||
<div id="discord_ollama_settings"
|
||||
style="display:none; padding: 10px; border-left: 3px solid rgba(0,255,0,0.4); background: rgba(0,255,0,0.03); border-radius: 0 6px 6px 0; margin-top: 4px;">
|
||||
<div style="font-size: 0.8em; font-weight: bold; margin-bottom: 8px; opacity: 0.9;">
|
||||
<i class="fa-solid fa-terminal"></i> Ollama
|
||||
</div>
|
||||
<input id="discord_url" type="text" class="text_pole" placeholder="http://localhost:11434"
|
||||
title="Ollama API endpoint" style="margin-bottom: 6px; font-size: 0.85em;">
|
||||
<select id="discord_model_select" class="text_pole" style="font-size: 0.85em;"></select>
|
||||
<div id="discord_ollama_status" style="font-size: 0.8em; margin-top: 6px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Provider: OpenAI Compatible -->
|
||||
<div id="discord_openai_settings"
|
||||
style="display:none; padding: 10px; border-left: 3px solid rgba(0,180,255,0.4); background: rgba(0,180,255,0.03); border-radius: 0 6px 6px 0; margin-top: 4px;">
|
||||
<div style="font-size: 0.8em; font-weight: bold; margin-bottom: 8px; opacity: 0.9;">
|
||||
<i class="fa-solid fa-cloud"></i> OpenAI Compatible
|
||||
</div>
|
||||
<select id="discord_openai_preset" class="text_pole" style="margin-bottom: 6px; font-size: 0.85em;">
|
||||
<option value="custom">Custom</option>
|
||||
<option value="lmstudio">LM Studio (:1234)</option>
|
||||
<option value="kobold">KoboldCPP (:5001)</option>
|
||||
<option value="textgen">TextGenWebUI (:5000)</option>
|
||||
<option value="vllm">vLLM (:8000)</option>
|
||||
</select>
|
||||
<input id="discord_openai_url" type="text" class="text_pole" placeholder="http://localhost:1234/v1"
|
||||
title="API endpoint URL" style="margin-bottom: 6px; font-size: 0.85em;">
|
||||
<input id="discord_openai_key" type="password" class="text_pole" placeholder="API Key (Optional)"
|
||||
title="API Key (if required)" style="margin-bottom: 6px; font-size: 0.85em;">
|
||||
<input id="discord_openai_model" type="text" class="text_pole" placeholder="Model name"
|
||||
title="Model identifier" style="font-size: 0.85em;">
|
||||
</div>
|
||||
|
||||
<!-- Provider: Connection Profile -->
|
||||
<div id="discord_profile_settings"
|
||||
style="display:none; padding: 10px; border-left: 3px solid rgba(100,150,255,0.4); background: rgba(100,150,255,0.03); border-radius: 0 6px 6px 0; margin-top: 4px;">
|
||||
<div style="font-size: 0.8em; font-weight: bold; margin-bottom: 8px; opacity: 0.9;">
|
||||
<i class="fa-solid fa-link"></i> Connection Profile
|
||||
</div>
|
||||
<select id="discord_preset_select" class="text_pole" style="font-size: 0.85em;"></select>
|
||||
<div style="font-size: 0.75em; opacity: 0.6; margin-top: 6px;">
|
||||
<i class="fa-solid fa-shield-halved"></i> Uses your existing ST credentials securely.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin: 10px 0; opacity: 0.2;">
|
||||
|
||||
<!-- Content Settings Section -->
|
||||
<div style="margin-bottom: 16px;">
|
||||
<h4
|
||||
style="margin: 0 0 8px 0; font-size: 0.8em; text-transform: uppercase; color: var(--SmartThemeQuoteColor); display: flex; align-items: center; gap: 6px; letter-spacing: 0.5px;">
|
||||
<i class="fa-solid fa-sliders"></i> Content Settings
|
||||
</h4>
|
||||
|
||||
<!-- Row 1: Style + Position -->
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px;">
|
||||
<div>
|
||||
<label for="discord_style"
|
||||
style="display: block; font-size: 0.8em; margin-bottom: 3px; opacity: 0.8;">
|
||||
<i class="fa-solid fa-palette" style="width: 14px;"></i> Style
|
||||
</label>
|
||||
<select id="discord_style" class="text_pole" style="width: 100%; font-size: 0.85em;">
|
||||
<option value="twitch">Discord/Twitch</option>
|
||||
<option value="verbose">Thoughtful</option>
|
||||
<option value="twitter">Twitter/X</option>
|
||||
<option value="news">Breaking News</option>
|
||||
<option value="mst3k">MST3K</option>
|
||||
<option value="nsfw_ava">Ava NSFW</option>
|
||||
<option value="nsfw_kai">Kai NSFW</option>
|
||||
<option value="hypebot">HypeBot</option>
|
||||
<option value="doomscrollers">Doomscrollers</option>
|
||||
<option value="dumbanddumber">Dumb & Dumber</option>
|
||||
<option value="ao3wattpad">AO3 / Wattpad</option>
|
||||
<option value="custom">Custom</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="discord_position"
|
||||
style="display: block; font-size: 0.8em; margin-bottom: 3px; opacity: 0.8;">
|
||||
<i class="fa-solid fa-arrows-up-down-left-right" style="width: 14px;"></i> Position
|
||||
</label>
|
||||
<select id="discord_position" class="text_pole" style="width: 100%; font-size: 0.85em;">
|
||||
<option value="bottom">Bottom</option>
|
||||
<option value="top">Top</option>
|
||||
<option value="left">Left</option>
|
||||
<option value="right">Right</option>
|
||||
<option value="popout">↗ Pop Out</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 2: Users + Font + Opacity -->
|
||||
<div
|
||||
style="display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 8px; margin-bottom: 12px; align-items: end;">
|
||||
<div>
|
||||
<label for="discord_user_count"
|
||||
style="display: block; font-size: 0.8em; margin-bottom: 3px; opacity: 0.8;">
|
||||
<i class="fa-solid fa-users" style="width: 14px;"></i> Users
|
||||
</label>
|
||||
<input id="discord_user_count" type="number" class="text_pole" min="1" max="20" value="5"
|
||||
style="width: 100%; font-size: 0.85em;" title="Number of fake users (1-20)">
|
||||
</div>
|
||||
<div>
|
||||
<label for="discord_font_size"
|
||||
style="display: block; font-size: 0.8em; margin-bottom: 3px; opacity: 0.8;">
|
||||
<i class="fa-solid fa-font" style="width: 14px;"></i> Font
|
||||
</label>
|
||||
<input id="discord_font_size" type="number" class="text_pole" min="8" max="32" value="15"
|
||||
style="width: 100%; font-size: 0.85em;" title="Font size in pixels">
|
||||
</div>
|
||||
<div>
|
||||
<label style="display: block; font-size: 0.8em; margin-bottom: 3px; opacity: 0.8;">
|
||||
<i class="fa-solid fa-eye" style="width: 14px;"></i> Opacity
|
||||
</label>
|
||||
<div style="display: flex; align-items: center; gap: 6px;">
|
||||
<input id="discord_opacity" type="range" class="slider" min="10" max="100" value="80"
|
||||
step="5" style="flex-grow: 1;">
|
||||
<span id="discord_opacity_val"
|
||||
style="font-size: 0.8em; min-width: 32px; text-align: right;">80%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Auto-update On Messages -->
|
||||
<div style="padding: 10px; background: rgba(0,0,0,0.1); border-radius: 6px; margin-bottom: 10px;">
|
||||
<label class="checkbox_label" for="discord_auto_update"
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
||||
<input id="discord_auto_update" type="checkbox" class="checkbox">
|
||||
<span style="font-size: 0.9em;"><i class="fa-solid fa-sync"
|
||||
style="width: 16px; opacity: 0.8;"></i> Auto-update On Messages</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Include Chat History -->
|
||||
<div style="padding: 10px; background: rgba(0,0,0,0.1); border-radius: 6px; margin-bottom: 10px;">
|
||||
<label class="checkbox_label" for="discord_include_user"
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
||||
<input id="discord_include_user" type="checkbox" class="checkbox">
|
||||
<span style="font-size: 0.9em;"><i class="fa-solid fa-comments"
|
||||
style="width: 16px; opacity: 0.8;"></i> Include Chat History</span>
|
||||
</label>
|
||||
<div id="discord_context_depth_container"
|
||||
style="margin-top: 8px; margin-left: 24px; display: none;">
|
||||
<label for="discord_context_depth"
|
||||
style="font-size: 0.8em; opacity: 0.8; display: block; margin-bottom: 4px;">
|
||||
Context Depth:
|
||||
</label>
|
||||
<input id="discord_context_depth" type="number" class="text_pole" min="2" max="20" value="4"
|
||||
style="width: 80px; font-size: 0.85em;" title="Number of messages to include">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include Past Generated EchoChambers -->
|
||||
<div style="padding: 10px; background: rgba(0,0,0,0.1); border-radius: 6px; margin-bottom: 10px;">
|
||||
<label class="checkbox_label" for="discord_include_past_echo"
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
||||
<input id="discord_include_past_echo" type="checkbox" class="checkbox">
|
||||
<span style="font-size: 0.9em;"><i class="fa-solid fa-layer-group"
|
||||
style="width: 16px; opacity: 0.8;"></i> Include Past Generated EchoChambers</span>
|
||||
</label>
|
||||
<div style="margin-top: 6px; margin-left: 24px; font-size: 0.75em; opacity: 0.6;">
|
||||
Includes previous commentary in the prompt for new generations
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include Context Options -->
|
||||
<div style="padding: 10px; background: rgba(0,0,0,0.1); border-radius: 6px; margin-bottom: 10px;">
|
||||
<div style="font-size: 0.8em; font-weight: bold; margin-bottom: 8px; opacity: 0.9;">
|
||||
<i class="fa-solid fa-file-lines"></i> Include in Context
|
||||
</div>
|
||||
<label class="checkbox_label" for="discord_include_persona"
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 6px;">
|
||||
<input id="discord_include_persona" type="checkbox" class="checkbox">
|
||||
<span style="font-size: 0.85em;"><i class="fa-solid fa-face-smile"
|
||||
style="width: 14px; opacity: 0.8;"></i> Persona</span>
|
||||
</label>
|
||||
<label class="checkbox_label" for="discord_include_character_description"
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 6px;">
|
||||
<input id="discord_include_character_description" type="checkbox" class="checkbox">
|
||||
<span style="font-size: 0.85em;"><i class="fa-solid fa-address-card"
|
||||
style="width: 14px; opacity: 0.8;"></i> Character Description(s)</span>
|
||||
</label>
|
||||
<label class="checkbox_label" for="discord_include_summary"
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 6px;">
|
||||
<input id="discord_include_summary" type="checkbox" class="checkbox">
|
||||
<span style="font-size: 0.85em;"><i class="fa-solid fa-scroll"
|
||||
style="width: 14px; opacity: 0.8;"></i> Summary (from Summarize ext.)</span>
|
||||
</label>
|
||||
<label class="checkbox_label" for="discord_include_world_info"
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
||||
<input id="discord_include_world_info" type="checkbox" class="checkbox">
|
||||
<span style="font-size: 0.85em;"><i class="fa-solid fa-globe"
|
||||
style="width: 14px; opacity: 0.8;"></i> World Info / Lorebook</span>
|
||||
</label>
|
||||
<div style="margin-top: 6px; margin-left: 22px; font-size: 0.75em; opacity: 0.6;">
|
||||
Additional context to include when generating the chat feed
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Livestream Mode -->
|
||||
<div style="padding: 10px; background: rgba(0,0,0,0.1); border-radius: 6px;">
|
||||
<label class="checkbox_label" for="discord_livestream"
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
||||
<input id="discord_livestream" type="checkbox" class="checkbox">
|
||||
<span style="font-size: 0.9em;"><i class="fa-solid fa-tower-broadcast"
|
||||
style="width: 16px; opacity: 0.8;"></i> Livestream</span>
|
||||
</label>
|
||||
<div style="margin-top: 6px; margin-left: 24px; font-size: 0.75em; opacity: 0.6;">
|
||||
Instead of displaying the entire chat feed at once, simulate a "livestream" by showing messages
|
||||
appear in the panel over time
|
||||
</div>
|
||||
|
||||
<!-- Livestream Settings -->
|
||||
<div id="discord_livestream_settings" style="margin-top: 10px; margin-left: 24px; display: none;">
|
||||
<!-- Batch Size -->
|
||||
<div style="margin-bottom: 10px;">
|
||||
<label for="discord_livestream_batch_size"
|
||||
style="font-size: 0.8em; opacity: 0.8; display: block; margin-bottom: 4px;">
|
||||
<i class="fa-solid fa-boxes-stacked" style="width: 14px;"></i> Batch Size:
|
||||
</label>
|
||||
<input id="discord_livestream_batch_size" type="number" class="text_pole" min="5" max="50"
|
||||
value="20" style="width: 80px; font-size: 0.85em;"
|
||||
title="Number of messages to generate per batch">
|
||||
</div>
|
||||
|
||||
<!-- Wait Time Range -->
|
||||
<div style="margin-bottom: 10px;">
|
||||
<label for="discord_livestream_min_wait"
|
||||
style="font-size: 0.8em; opacity: 0.8; display: block; margin-bottom: 4px;">
|
||||
<i class="fa-solid fa-clock" style="width: 14px;"></i> Minimum Wait Time (seconds):
|
||||
</label>
|
||||
<input id="discord_livestream_min_wait" type="number" class="text_pole" min="1" max="120"
|
||||
value="5" style="width: 80px; font-size: 0.85em;"
|
||||
title="Minimum seconds to wait between messages">
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 10px;">
|
||||
<label for="discord_livestream_max_wait"
|
||||
style="font-size: 0.8em; opacity: 0.8; display: block; margin-bottom: 4px;">
|
||||
<i class="fa-solid fa-clock" style="width: 14px;"></i> Maximum Wait Time (seconds):
|
||||
</label>
|
||||
<input id="discord_livestream_max_wait" type="number" class="text_pole" min="1" max="300"
|
||||
value="60" style="width: 80px; font-size: 0.85em;"
|
||||
title="Maximum seconds to wait between messages">
|
||||
</div>
|
||||
|
||||
<!-- Generation Mode -->
|
||||
<div style="margin-bottom: 8px;">
|
||||
<label style="font-size: 0.8em; opacity: 0.8; display: block; margin-bottom: 6px;">
|
||||
<i class="fa-solid fa-clapperboard" style="width: 14px;"></i> Generation Mode:
|
||||
</label>
|
||||
<label class="checkbox_label"
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 4px;">
|
||||
<input type="radio" name="discord_livestream_mode" value="manual" class="radio"
|
||||
id="discord_livestream_manual" checked>
|
||||
<span style="font-size: 0.85em;">Manual Upon Clicking Regenerate Chat</span>
|
||||
</label>
|
||||
<label class="checkbox_label"
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 4px;">
|
||||
<input type="radio" name="discord_livestream_mode" value="onMessage" class="radio"
|
||||
id="discord_livestream_onmessage">
|
||||
<span style="font-size: 0.85em;">Generate Upon Receiving A New Message</span>
|
||||
</label>
|
||||
<label class="checkbox_label"
|
||||
style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
||||
<input type="radio" name="discord_livestream_mode" value="onComplete" class="radio"
|
||||
id="discord_livestream_oncomplete">
|
||||
<span style="font-size: 0.85em;">Generate A New Batch After The Last One Finishes</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin: 10px 0; opacity: 0.2;">
|
||||
|
||||
<!-- Style Manager Section -->
|
||||
<div>
|
||||
<h4
|
||||
style="margin: 0 0 8px 0; font-size: 0.8em; text-transform: uppercase; color: var(--SmartThemeQuoteColor); display: flex; align-items: center; gap: 6px; letter-spacing: 0.5px;">
|
||||
<i class="fa-solid fa-folder-tree"></i> Style Manager
|
||||
</h4>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<button id="discord_open_style_editor" class="menu_button">
|
||||
<i class="fa-solid fa-palette"></i> Manage
|
||||
</button>
|
||||
<button id="discord_import_btn" class="menu_button">
|
||||
<i class="fa-solid fa-file-import"></i> Import
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="text-align: center; margin-top: 8px; font-size: 0.75em; opacity: 0.5; font-family: monospace;">
|
||||
v4.2.0
|
||||
</div>
|
||||
<input type="file" id="discord_import_file" accept=".md" style="display:none;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
76
style.css
76
style.css
|
|
@ -161,7 +161,44 @@
|
|||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Toggle Button (Power/Check) */
|
||||
/* Power Button (Enable/Disable Extension) */
|
||||
.ec_power_btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: var(--ec-accent);
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.ec_power_btn:hover {
|
||||
background: var(--ec-hover);
|
||||
}
|
||||
|
||||
/* Collapse Button (Expand/Collapse Panel) */
|
||||
.ec_collapse_btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: var(--ec-text);
|
||||
transition: all 0.2s;
|
||||
flex-shrink: 0;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.ec_collapse_btn:hover {
|
||||
background: var(--ec-hover);
|
||||
}
|
||||
|
||||
/* Legacy toggle button - kept for compatibility */
|
||||
.ec_toggle_btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
|
@ -189,8 +226,24 @@
|
|||
letter-spacing: 0.5px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
margin-left: 8px;
|
||||
margin-left: 4px;
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Hide LIVE text when space is tight, show only icon */
|
||||
@media (max-width: 500px) {
|
||||
.ec_live_indicator {
|
||||
padding: 2px 4px;
|
||||
font-size: 0;
|
||||
gap: 0;
|
||||
}
|
||||
.ec_live_indicator i {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.ec_live_indicator i {
|
||||
|
|
@ -232,6 +285,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* Disabled state (paused) */
|
||||
#discordBar.ec_disabled .ec_chat_container,
|
||||
#discordBar.ec_disabled .ec_message,
|
||||
#discordBar.ec_disabled .ec_typing_indicator {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#discordBar.ec_disabled .ec_live_indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Icon Buttons (all same style) */
|
||||
.ec_btn {
|
||||
width: 28px;
|
||||
|
|
@ -1371,7 +1435,7 @@
|
|||
gap: 4px !important;
|
||||
}
|
||||
|
||||
/* In collapsed side panels, only show the toggle button */
|
||||
/* In collapsed side panels, only show the power and collapse buttons */
|
||||
#discordBar.ec_left.ec_collapsed .ec_header_left,
|
||||
#discordBar.ec_right.ec_collapsed .ec_header_left {
|
||||
display: flex !important;
|
||||
|
|
@ -1384,7 +1448,11 @@
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
/* Make toggle button slightly larger for touch on collapsed state */
|
||||
/* Make buttons slightly larger for touch on collapsed state */
|
||||
#discordBar.ec_left.ec_collapsed .ec_power_btn,
|
||||
#discordBar.ec_right.ec_collapsed .ec_power_btn,
|
||||
#discordBar.ec_left.ec_collapsed .ec_collapse_btn,
|
||||
#discordBar.ec_right.ec_collapsed .ec_collapse_btn,
|
||||
#discordBar.ec_left.ec_collapsed .ec_toggle_btn,
|
||||
#discordBar.ec_right.ec_collapsed .ec_toggle_btn {
|
||||
width: 28px !important;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue