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

Шаг 1

Ставим расширение. Вставляем ссылку https://github.com/horse-armor/st-clickable-inputs в "Install Extension" в меню расширений таверны и устанавливаем

Шаг 2

Расширение немного кривое. С каждым запросом отправляет ненужный промт в конце, кнопки работают не очень правильно. Заменяем файл index.js этим файлом (предварительно распаковав) https://files.catbox.moe/j4rkir.zip по адресу SillyTavern\data\default-user\extensions\st-clickable-inputs
Исправлено:
1 - убрал ненужный промт, который каждый раз отправляется после истории чата
2 - кнопки работают без тегов <div> (экономия токенов)
3 - кнопки работают правильно вне зависимости в какую часть нажал (в оригинале было что отправляется только половина кнопки)

Шаг 3

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

⎗
✓
At the end of your reply you must write this CYOA block. It must contain suggestions what {{user}} will say and do. These suggestions must drive story forward. {{user}}'s actions must be written in the first person starting with 'I'. Write 1-3 sentences in each option. Example: "Hello." I wave at her. "What's your name?"

<cyoa>
<button>Predictable reply based on previous {{user}}'s replies.</button>
<button>Reply that will improve the current situation.</button>
<button>Reply that will change the current scene.</button>
<button>Funny and humorous reply.</button>
<button>Flirty reply.</button>
<button>Lewd reply.</button>
</cyoa>

Шаг 4

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

Шаг 5

В оригинале кнопки выглядят ужасно, поэтому изменим вид с помощью 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;
}