Merge pull request #3282 from SillyTavern/fix-chat-comp-label-wrapping

Fix Chat Completion list label descriptions not correctly wrapping on non-chromium browsers
This commit is contained in:
Cohee
2025-01-15 00:34:13 +02:00
committed by GitHub
3 changed files with 32 additions and 9 deletions

View File

@@ -271,6 +271,24 @@
opacity: 0.8; opacity: 0.8;
} }
#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt .drag-handle:not(.ui-sortable-handle) {
display: none;
}
#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt:has(.drag-handle.ui-sortable-handle) {
position: relative;
padding-left: 20px;
}
#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt .drag-handle {
position: absolute;
height: 100%;
top: 0;
padding: 0 5px;
display: flex;
align-items: center;
}
#completion_prompt_manager_footer_append_prompt { #completion_prompt_manager_footer_append_prompt {
font-size: 1em; font-size: 1em;
} }

View File

@@ -1934,22 +1934,24 @@
<label for="openai_function_calling" class="checkbox_label flexWrap widthFreeExpand"> <label for="openai_function_calling" class="checkbox_label flexWrap widthFreeExpand">
<input id="openai_function_calling" type="checkbox" /> <input id="openai_function_calling" type="checkbox" />
<span data-i18n="Enable function calling">Enable function calling</span> <span data-i18n="Enable function calling">Enable function calling</span>
<div class="flexBasis100p toggle-description justifyLeft">
<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>.
<span data-i18n="enable_functions_desc_3">Can be utilized by various extensions to provide additional functionality.</span>
</div>
</label> </label>
<div class="flexBasis100p toggle-description justifyLeft">
<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>.
<span data-i18n="enable_functions_desc_3">Can be utilized by various extensions to provide additional functionality.</span>
</div>
</div> </div>
<div class="range-block" data-source="openai,openrouter,makersuite,claude,custom,01ai"> <div class="range-block" data-source="openai,openrouter,makersuite,claude,custom,01ai">
<label for="openai_image_inlining" class="checkbox_label flexWrap widthFreeExpand"> <label for="openai_image_inlining" class="checkbox_label flexWrap widthFreeExpand">
<input id="openai_image_inlining" type="checkbox" /> <input id="openai_image_inlining" type="checkbox" />
<span data-i18n="Send inline images">Send inline images</span> <span data-i18n="Send inline images">Send inline images</span>
<div id="image_inlining_hint" class="flexBasis100p toggle-description justifyLeft">
<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> <code><i class="fa-solid fa-paperclip"></i></code> <span data-i18n="image_inlining_hint_2">action on any message or the</span>
<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>
</div>
</label> </label>
<div id="image_inlining_hint" class="flexBasis100p toggle-description justifyLeft">
<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>
<code><i class="fa-solid fa-paperclip"></i></code>
<span data-i18n="image_inlining_hint_2">action on any message or the</span>
<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>
</div>
<div class="flex-container flexFlowColumn wide100p textAlignCenter marginTop10" data-source="openai,custom"> <div class="flex-container flexFlowColumn wide100p textAlignCenter marginTop10" data-source="openai,custom">
<label for="openai_inline_image_quality" data-i18n="Inline Image Quality"> <label for="openai_inline_image_quality" data-i18n="Inline Image Quality">
Inline Image Quality Inline Image Quality

View File

@@ -11,6 +11,7 @@ import { debounce_timeout } from './constants.js';
import { renderTemplateAsync } from './templates.js'; import { renderTemplateAsync } from './templates.js';
import { Popup } from './popup.js'; import { Popup } from './popup.js';
import { t } from './i18n.js'; import { t } from './i18n.js';
import { isMobile } from './RossAscends-mods.js';
function debouncePromise(func, delay) { function debouncePromise(func, delay) {
let timeoutId; let timeoutId;
@@ -1562,6 +1563,7 @@ class PromptManager {
listItemHtml += ` listItemHtml += `
<li class="${prefix}prompt_manager_prompt ${draggableClass} ${enabledClass} ${markerClass} ${importantClass}" data-pm-identifier="${escapeHtml(prompt.identifier)}"> <li class="${prefix}prompt_manager_prompt ${draggableClass} ${enabledClass} ${markerClass} ${importantClass}" data-pm-identifier="${escapeHtml(prompt.identifier)}">
<span class="drag-handle">☰</span>
<span class="${prefix}prompt_manager_prompt_name" data-pm-name="${encodedName}"> <span class="${prefix}prompt_manager_prompt_name" data-pm-name="${encodedName}">
${isMarkerPrompt ? '<span class="fa-fw fa-solid fa-thumb-tack" title="Marker"></span>' : ''} ${isMarkerPrompt ? '<span class="fa-fw fa-solid fa-thumb-tack" title="Marker"></span>' : ''}
${isSystemPrompt ? '<span class="fa-fw fa-solid fa-square-poll-horizontal" title="Global Prompt"></span>' : ''} ${isSystemPrompt ? '<span class="fa-fw fa-solid fa-square-poll-horizontal" title="Global Prompt"></span>' : ''}
@@ -1741,6 +1743,7 @@ class PromptManager {
makeDraggable() { makeDraggable() {
$(`#${this.configuration.prefix}prompt_manager_list`).sortable({ $(`#${this.configuration.prefix}prompt_manager_list`).sortable({
delay: this.configuration.sortableDelay, delay: this.configuration.sortableDelay,
handle: isMobile() ? '.drag-handle' : null,
items: `.${this.configuration.prefix}prompt_manager_prompt_draggable`, items: `.${this.configuration.prefix}prompt_manager_prompt_draggable`,
update: (event, ui) => { update: (event, ui) => {
const promptOrder = this.getPromptOrderForCharacter(this.activeCharacter); const promptOrder = this.getPromptOrderForCharacter(this.activeCharacter);