Merge pull request #3282 from SillyTavern/fix-chat-comp-label-wrapping Fix Chat Completion list label descriptions not correctly wrapping on non-chromium browsers

fb15480f6b39da047b98eba5721021f94fc09025

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

Signed
Parents: 3770410bed50276b00bf601a69345d5764f6c0c9 f8c6a62c23b422cf87e67777c0a0649fc16a5673
3 files changed, +32 -9Ignore whitespace
public/css/promptmanager.css+18 -0
@@ -271,6 +271,24 @@
271271 opacity: 0.8;
272272}
273273
274+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt .drag-handle:not(.ui-sortable-handle) {
275+ display: none;
276+}
277+
278+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt:has(.drag-handle.ui-sortable-handle) {
279+ position: relative;
280+ padding-left: 20px;
281+}
282+
283+#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt .drag-handle {
284+ position: absolute;
285+ height: 100%;
286+ top: 0;
287+ padding: 0 5px;
288+ display: flex;
289+ align-items: center;
290+}
291+
274292#completion_prompt_manager_footer_append_prompt {
275293 font-size: 1em;
276294}
public/index.html+11 -9
@@ -1934,22 +1934,24 @@
19341934 <label for="openai_function_calling" class="checkbox_label flexWrap widthFreeExpand">
19351935 <input id="openai_function_calling" type="checkbox" />
19361936 <span data-i18n="Enable function calling">Enable function calling</span>
1937- <div class="flexBasis100p toggle-description justifyLeft">
1938- <span data-i18n="enable_functions_desc_1">Allows using </span><a href="https://platform.openai.com/docs/guides/function-calling" target="_blank" data-i18n="enable_functions_desc_2">function tools</a>.
1939- <span data-i18n="enable_functions_desc_3">Can be utilized by various extensions to provide additional functionality.</span>
1940- </div>
19411937 </label>
1938+ <div class="flexBasis100p toggle-description justifyLeft">
1939+ <span data-i18n="enable_functions_desc_1">Allows using </span><a href="https://platform.openai.com/docs/guides/function-calling" target="_blank" data-i18n="enable_functions_desc_2">function tools</a>.
1940+ <span data-i18n="enable_functions_desc_3">Can be utilized by various extensions to provide additional functionality.</span>
1941+ </div>
19421942 </div>
19431943 <div class="range-block" data-source="openai,openrouter,makersuite,claude,custom,01ai">
19441944 <label for="openai_image_inlining" class="checkbox_label flexWrap widthFreeExpand">
19451945 <input id="openai_image_inlining" type="checkbox" />
19461946 <span data-i18n="Send inline images">Send inline images</span>
1947- <div id="image_inlining_hint" class="flexBasis100p toggle-description justifyLeft">
1948- <span data-i18n="image_inlining_hint_1">Sends images in prompts if the model supports it (e.g. GPT-4V, Claude 3 or Llava 13B).
1949- Use the</span> <code><i class="fa-solid fa-paperclip"></i></code> <span data-i18n="image_inlining_hint_2">action on any message or the</span>
1950- <code><i class="fa-solid fa-wand-magic-sparkles"></i></code> <span data-i18n="image_inlining_hint_3">menu to attach an image file to the chat.</span>
1951- </div>
19521947 </label>
1948+ <div id="image_inlining_hint" class="flexBasis100p toggle-description justifyLeft">
1949+ <span data-i18n="image_inlining_hint_1">Sends images in prompts if the model supports it (e.g. GPT-4V, Claude 3 or Llava 13B). Use the</span>
1950+ <code><i class="fa-solid fa-paperclip"></i></code>
1951+ <span data-i18n="image_inlining_hint_2">action on any message or the</span>
1952+ <code><i class="fa-solid fa-wand-magic-sparkles"></i></code>
1953+ <span data-i18n="image_inlining_hint_3">menu to attach an image file to the chat.</span>
1954+ </div>
19531955 <div class="flex-container flexFlowColumn wide100p textAlignCenter marginTop10" data-source="openai,custom">
19541956 <label for="openai_inline_image_quality" data-i18n="Inline Image Quality">
19551957 Inline Image Quality
public/scripts/PromptManager.js+3 -0
@@ -11,6 +11,7 @@ import { debounce_timeout } from './constants.js';
1111import { renderTemplateAsync } from './templates.js';
1212import { Popup } from './popup.js';
1313import { t } from './i18n.js';
14+import { isMobile } from './RossAscends-mods.js';
1415
1516function debouncePromise(func, delay) {
1617 let timeoutId;
@@ -1562,6 +1563,7 @@ class PromptManager {
15621563
15631564 listItemHtml += `
15641565 <li class="${prefix}prompt_manager_prompt ${draggableClass} ${enabledClass} ${markerClass} ${importantClass}" data-pm-identifier="${escapeHtml(prompt.identifier)}">
1566+ <span class="drag-handle">☰</span>
15651567 <span class="${prefix}prompt_manager_prompt_name" data-pm-name="${encodedName}">
15661568 ${isMarkerPrompt ? '<span class="fa-fw fa-solid fa-thumb-tack" title="Marker"></span>' : ''}
15671569 ${isSystemPrompt ? '<span class="fa-fw fa-solid fa-square-poll-horizontal" title="Global Prompt"></span>' : ''}
@@ -1741,6 +1743,7 @@ class PromptManager {
17411743 makeDraggable() {
17421744 $(`#${this.configuration.prefix}prompt_manager_list`).sortable({
17431745 delay: this.configuration.sortableDelay,
1746+ handle: isMobile() ? '.drag-handle' : null,
17441747 items: `.${this.configuration.prefix}prompt_manager_prompt_draggable`,
17451748 update: (event, ui) => {
17461749 const promptOrder = this.getPromptOrderForCharacter(this.activeCharacter);