CYOA и интерактивные кнопки

Оригинальное расширение

https://github.com/horse-armor/st-clickable-inputs

Шаг 1

Расширение немного кривое. С каждым запросом отправляет ненужный промт в конце, кнопки работают не очень правильно.
Вот переделанная версия - https://files.catbox.moe/ivu2ft.7z
Скачиваем архив выше и распаковываем по пути \SillyTavern\data\default-user\extensions
Должно получится так:
Alt Tag

Исправлено:
1 - убрал ненужный промт, который каждый раз отправляется после истории чата
2 - кнопки работают без тегов <div> (экономия токенов)
3 - кнопки работают правильно вне зависимости в какую часть нажал (в оригинале было что отправляется только половина кнопки)

Шаг 2

Пример промта для CYOA блока. Я ставлю после истории от роли юзера например. Промт можно менять, главное чтобы опции были обернуты в тег <button>

⎗
✓
<CYOA_rules>
Finish the response abruptly with CYOA choices, not mention them. Number of choices: {{random:5,5,6,6,6,7,7,7,8}}. Context-related, unfiltered, {{user}}'s next action/decision/dialogue. Varying: obvious, casual, interesting, hilarious, bad, evil, dark, pervy, wrong, fucked up, etc.: always different from the previous. Funny, creative, unexpected options encouraged. Wrap in <choices> XML tag. Template (randomized):
<choices>
<button>(Choice text)</button>
<button>(Choice text)</button>
<button>(Choice text)</button>
</choices>
</CYOA_rules>

Шаг 3

Ставим регекс для удаления choices блока сразу же из промта (отправлятся будет только тот ответ, на который кликнуть мышкой)
https://files.catbox.moe/po39sk.json

Шаг 4

В оригинале кнопки выглядят ужасно, поэтому изменим вид с помощью Custom CSS
В User Settings в таверне находим поле Custom CSS и вставляем следующий текст. Вид кнопок можно изменять как хочется. Если хотите, попросите нейронку помочь с этим.
Кнопка может быть не подходить по ширине в зависимости от монитора/ширины чата в таверне. В таком случае надо уменьшить/увеличить значение width: 1150px на подходящее.

⎗
✓
button {
    background: linear-gradient(to bottom, #2c3e50, #1a2634);
    color: #FAEBD7;
    font-family: 'Times New Roman', serif;
    font-size: 18px;
    font-weight: normal;
    padding: 5px 16px;
    border: 2px solid #4a3121;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1px;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    width: 1150px;
    text-align: center;
    display: inline-block;
}
button:hover {
    background: linear-gradient(to bottom, #34495e, #2c3e50);
    border-color: #6b4423;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5),
                0 0 5px 2px rgba(212, 175, 55, 0.3);
}
button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
button:disabled {
    background: #1a1a1a;
    border-color: #333333;
    color: #666666;
    cursor: not-allowed;
    box-shadow: none;
}
button::before,
button::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid #4a3121;
}
button::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}
button::after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}