oobabooga/text-generation-webui
1
0
Fork 0
mirror of https://github.com/oobabooga/text-generation-webui.git synced 2026-03-18 03:14:39 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

UI: Improve the Tools checkbox list style

Browse source
This commit is contained in:
oobabooga 2026-03-12 16:53:49 -07:00
parent fdd8e5b1fd
commit 09d5e049d6
3 changed files with 103 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
css/main.css
View file

@ -1814,3 +1814,86 @@ tr + tr th { border-top: 1px solid; }
thead + tbody tr:first-child td,
thead + tbody tr:first-child th { border-top: 1px solid; }
/* ------------------------------------------------
Tools CheckboxGroup - vertical DragDrop-like style
------------------------------------------------ */
/* "Refresh list" link in the Tools label */
.tools-refresh-link {
cursor: pointer;
}
/* Checkbox list container */
#tools-group {
padding: 0 !important;
border-width: 0 !important;
background: transparent !important;
min-height: 0 !important;
}
#tools-group .wrap {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 4px;
padding: 0;
margin-top: var(--spacing-lg);
max-height: 350px;
overflow-y: auto;
}
/* Pretty scrollbar for the tools list */
#tools-group .wrap::-webkit-scrollbar {
width: 8px;
height: 8px;
}
#tools-group .wrap::-webkit-scrollbar-track {
background: transparent;
}
#tools-group .wrap::-webkit-scrollbar-thumb,
#tools-group .wrap::-webkit-scrollbar-thumb:hover {
background: var(--neutral-300);
border-radius: 30px;
}
.dark #tools-group .wrap::-webkit-scrollbar-thumb,
.dark #tools-group .wrap::-webkit-scrollbar-thumb:hover {
background: rgb(255 255 255 / 6.25%);
border-radius: 10px;
}
#tools-group .wrap::-webkit-scrollbar-corner {
background: transparent;
}
/* Each checkbox item */
#tools-group label {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 8px;
border-radius: var(--radius-sm, 4px);
background: var(--block-background-fill);
border: 1px solid var(--border-color-primary);
color: var(--body-text-color);
font-size: var(--input-text-size);
font-weight: var(--input-text-weight);
cursor: pointer;
user-select: none;
transition: border-color 0.15s ease, background 0.15s ease;
box-shadow: none;
}
#tools-group label:hover {
border-color: var(--input-border-color-focus);
}
#tools-group label span {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

17
js/main.js
View file

@ -303,6 +303,23 @@ for(i = 0; i < scrollbarElements.length; i++) {
scrollbarElements[i].style.resize = "none";
}
//------------------------------------------------
// Tools: inject "Refresh list" link into the label
//------------------------------------------------
const toolsTitle = document.querySelector("#tools-group > [data-testid='block-info']");
const toolsInfo = toolsTitle ? toolsTitle.nextElementSibling : null;
if (toolsInfo) {
const refreshLink = document.createElement("span");
refreshLink.textContent = " [Refresh list]";
refreshLink.className = "tools-refresh-link";
refreshLink.addEventListener("click", function(e) {
e.preventDefault();
document.querySelector("#tools-refresh-btn").click();
});
toolsInfo.appendChild(refreshLink);
}
//------------------------------------------------
// Remove some backgrounds
//------------------------------------------------

5
modules/ui_chat.py
View file

@ -92,8 +92,9 @@ def create_ui():
gr.HTML("<div class='sidebar-vertical-separator'></div>")
from modules.tool_use import get_available_tools
shared.gradio['selected_tools'] = gr.CheckboxGroup(choices=get_available_tools(), value=[], label='Tools', info='Functions the model can call during generation.')
ui.create_refresh_button(shared.gradio['selected_tools'], lambda: None, lambda: {'choices': get_available_tools()}, 'refresh-button')
shared.gradio['selected_tools'] = gr.CheckboxGroup(choices=get_available_tools(), value=[], label='Tools', info='Functions the model can call during generation.', elem_id='tools-group')
shared.gradio['tools_refresh'] = gr.Button('Refresh list', elem_id='tools-refresh-btn', visible=False)
shared.gradio['tools_refresh'].click(fn=lambda: gr.update(choices=get_available_tools()), inputs=[], outputs=[shared.gradio['selected_tools']])
gr.HTML("<div class='sidebar-vertical-separator'></div>")