AI Bot - Новое модальное окно вопроса

:information_source: Сводка AI Bot - Модальное окно нового вопроса
:hammer_and_wrench: Репозиторий GitHub - VaperinaDEV/aibot-new-question-modal · GitHub
:question: Руководство по установке Как установить тему или компонент темы
:open_book: Новичок в темах Discourse? Начинающее руководство по использованию тем Discourse

Установить этот компонент темы

Привет :wave:

Для использования этого компонента требуется Discourse AI - AI Bot.

Этот компонент темы представляет собой модальную версию функций главной страницы ask.discourse.com. Таким образом, вы можете создать новый разговор с ботом AI Bot.

Это модальное окно занимает весь экран, создавая впечатление, что вы находитесь на другой странице. Или, по крайней мере, такова была цель.

Основные части:

Аватар: Аватар aibot имеет индикатор загрузки, который постоянно вращается в модальном окне, а также показывает, когда бот пишет.

aibot-spinner


Сообщение AI: Здесь также можно использовать HTML.
Screenshot 2024-10-20 at 16.27.18


Быстрые ссылки: Добавьте столько вопросов, сколько хотите.
Отображение быстрых ссылок ограничено настройками, и они перемешиваются при повторном открытии модального окна.

max quick links desktop по умолчанию: 5
max quick links mobile по умолчанию: 3


Недавние разговоры: Эта кнопка перенаправляет на страницу /search с параметрами in:messages, @aibot-username.
Screenshot 2024-10-20 at 16.33.38


На этом всё для модального окна. Вы можете изменить и настроить всё в настройках темы. :slight_smile:

Кнопку открытия модального окна AI Bot можно разместить в боковой панели в меню из трёх точек.

  1. sidebar-footer-actions

  2. before-sidebar-sections

  3. after-sidebar-sections

В настройках темы вы можете изменить стиль кнопки.


Давайте посмотрим на настройки темы

Настройки темы
  • quick_links: Здесь вы можете настроить быстрые кнопки с вопросами.
  • max quick links desktop: Максимальное количество быстрых ссылок, отображаемых на десктопе.
  • max quick links mobile: Максимальное количество быстрых ссылок, отображаемых на мобильных устройствах.
  • show_for_groups: Обязательная настройка. Добавьте название группы для отображения кнопки в боковой панели.
  • aibot_id: Обязательная настройка. Добавьте ID AI Bot, который вы хотите использовать.
  • aibot_username: Обязательная настройка. Добавьте имя пользователя AI Bot, которое вы хотите использовать.
  • aibot_avatar: Обязательная настройка. Загрузите изображение для AI Bot, которое будет отображаться в модальном окне.
  • sibebar aibot button postition: Выберите положение кнопки в боковой панели.
    • sidebar-footer-actions (по умолчанию)
    • before-sidebar-sections (верх боковой панели)
    • after-sidebar-sections (низ боковой панели)
  • sibebar aibot button style: Выберите стиль кнопки в боковой панели.
    • btn-primary (по умолчанию)
    • btn-default
  • sidebar aibot button border-radius: Измените скругление кнопки в боковой панели.
  • sidebar aibot button before icon: Измените иконку кнопки в боковой панели.
  • aibot recent messages icon: Измените иконку кнопки недавних разговоров.
  • modal background: Измените фон модального окна.
  • modal content wrapper background: Измените фон контейнера контента модального окна.
  • modal content wrapper border radius: Измените скругление контейнера контента модального окна.
  • quick buttons style: Выберите стиль быстрых кнопок.
    • btn-primary (по умолчанию)
    • btn-default
  • quick buttons border radius: Измените скругление быстрых кнопок.
  • mobile quick buttons wrapper border radius: Измените скругление контейнера быстрых кнопок на мобильных устройствах.
  • aibot avatar spinner primary color: Измените основной цвет индикатора загрузки аватара (по умолчанию var(--tertiary)).
  • aibot avatar spinner secondary color: Измените вторичный цвет индикатора загрузки аватара (по умолчанию #ffffff).
  • aibot message border color: Эта граница находится справа от сообщения (по умолчанию var(--tertiary)).
  • textarea border-radius: Измените скругление текстового поля.
  • send button border radius: Измените скругление кнопки отправки.
  • recent messages button border radius: Измените скругление кнопки недавних сообщений.
  • recent messages button color: Измените цвет кнопки недавних сообщений. Это также изменит цвет иконки.
  • recent messages button hover color: Измените цвет кнопки недавних сообщений при наведении.
  • recent messages button hover background: Измените фон кнопки недавних сообщений при наведении.
  • recent messages button border: Измените границу кнопки недавних сообщений.
  • spinner loader border: Измените границу индикатора загрузки модального окна. Появляется при отправке сообщения.
  • spinner loader border right color: Измените цвет правой стороны индикатора загрузки.

Также есть некоторые переводы темы…

Переводы темы
  • aibot_modal_title: Это заголовок модального окна.
  • aibot_message: Это сообщение AI Bot в модальном окне.
  • input_placeholder: Это текст-заполнитель в текстовом поле.
  • input_submit: Это текст кнопки отправки.
  • input_length: Это сообщение появляется, когда текст слишком короткий.
  • disclaimer: Этот текст отображается под текстовым полем в модальном окне.
  • new_question: Это текст кнопки в боковой панели.
  • recent_messages: Это текст кнопки недавних сообщений в модальном окне.

Этот компонент темы скрывает кнопку «Поделиться» из личных сообщений AI Bot. Текст discourse_ai.ai_bot.default_pm_prefix — это заголовок сообщения по умолчанию, который автоматически меняется в зависимости от темы разговора. Вы можете изменить его в /admin/customize/site_texts.


Авторы: Discourse Ask Theme

14 лайков

Этот набор примеров вопросов не прокручивается на сенсорных экранах и показывает только два из них на iPhone. Просто к сведению.

А теперь я просто думаю вслух.

Это был бы привлекательный способ предложить ИИ группам, которым форум в противном случае запрещает использование ИИ. Например, TL1. Но чтобы предоставить такую возможность, TL1 должно быть разрешено в настройках DAI, и даже в этом случае отображается значок робота, что излишне из-за этого модального окна.

1 лайк

Я скоро это проверю…

Это можно отключить с помощью настройки сайта «ai bot add to header».

Хорошо, но это лишь небольшой вопрос по интерфейсу. Так что спешить некуда.

Я знаю, но это просто переключатель «вкл/выкл», а продвинутым пользователям он нужен, потому что это единственный способ переключаться между разными персонажами. Однако ваше модальное окно предназначено, по моему мнению, для обычных конечных пользователей, и тогда у вас есть две кнопки, выполняющие по сути одно и то же, что занимает лишнее место.

Но я не знаю, как справиться с ситуацией, когда, например, пользователь с уровнем доступа ниже TL2 видит модальное окно, но не видит иконку робота, в то же время другая группа, состоящая из пользователей с уровнем TL1, не видит кнопку модального окна, а только иконку робота, или же видит и то, и другое.

Вот почему это была лишь мысль :woozy_face:

Я знаю, что можно скрыть иконку с помощью CSS, ограничивающего видимость, но честно говоря, это очень скоро приведёт к ужасному беспорядку, когда подобных настроек и самодельных компонентов будет повсюду.

Но мне нравится модальное окно, потому что я верю, что оно снизит барьер для использования ИИ.

1 лайк

Это великолепно, отлично сделано, @Don!

3 лайка

Отличный интерфейс! Я ещё не пробовал его, но спасибо, что поделились. Если получится, я бы с радостью угостил вас чашечкой кофе :smiling_face_with_three_hearts:

1 лайк

Фантастический плагин, @Don! Отличная работа… Я только что установил его и заметил, что на iPhone 13 в Safari и Chrome «Быстрые ссылки», настроенные в редакторе настроек объектов, зафиксированы на экране, пока не коснуться поля ввода «Спросить у AI-бота». После этого можно пролистать, чтобы увидеть другие вопросы, которые изначально не отображались. При попытке просмотреть другие быстрые ссылки можно случайно нажать на одну из них.

1 лайк

Спасибо, Брайан. Да, я только что проверил на своём iPhone 6s, и там это тоже работает не очень хорошо. :slightly_frowning_face: Поэтому я решил убрать прокручиваемые быстрые кнопки. Вместо этого я добавил два новых параметра для управления максимальным количеством быстрых ссылок в представлениях для настольных компьютеров и мобильных устройств, а также внес некоторые правки в модальное окно с аватаром ИИ и секцию сообщений, чтобы они лучше отображались на маленьких экранах.

max quick links desktop по умолчанию: 5
max quick links mobile по умолчанию: 3


Редактирование: ещё…

Надеюсь, теперь всё работает лучше. :slightly_smiling_face:

3 лайка

Отличная работа, @Don! Спасибо за вашу работу и поддержку. Молодец!

2 лайка