AI Bot - New Question Modal

Theme component
,
1
:information_source: Summary AI Bot - New Question Modal
:hammer_and_wrench: Repository GitHub - VaperinaDEV/aibot-new-question-modal
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Hello :wave:

Discourse AI - AI Bot is required to use this.

This theme component is actually a modal version of ask.discourse.com homepage functions. So you can create a new conversation with the recipient AI Bot.

Screenshot 2024-10-20 at 16.16.12
Screenshot 2024-10-20 at 16.16.121352×692 96.1 KB

This modal is full screen so it gives the impression that you are on another page. Or something like that would have been the goal.

The main parts:

Avatar: The aibot avatar has a spinner which is always spinning in the modal avatar but it also indicates when it writes.

aibot-spinner

AI Message: You can use here HTML too.
Screenshot 2024-10-20 at 16.27.18

Quick links: Add as many question as you want.
The quick links display is limited with settings and it shuffles when you open again the modal.

max quick links desktop default: 5
max quick links mobile default: 3

Screenshot 2024-10-20 at 16.28.45
Screenshot 2024-10-20 at 16.28.45825×131 7.37 KB

Recent Conversations: This button redirects to the /search page with parameters in:messages, @aibot-username
Screenshot 2024-10-20 at 16.33.38

That’s all for modal. You can change, customize everything in theme settings. :slight_smile:

The AI Bot modal opening button can be place in sidebar 3 points.

  1. sidebar-footer-actions

    Screenshot 2024-10-20 at 16.38.27
    Screenshot 2024-10-20 at 16.38.27266×696 20.5 KB

  2. before-sidebar-sections

    Screenshot 2024-10-20 at 16.39.30
    Screenshot 2024-10-20 at 16.39.30269×698 18.8 KB

  3. after-sidebar-sections

    Screenshot 2024-10-20 at 16.40.02
    Screenshot 2024-10-20 at 16.40.02268×696 18.8 KB

In theme settings you can change the button style.

Let’s see the theme settings

Theme Settings
  • quick_links: Here you can set up the quick button questions.
  • max quick links desktop: Maximum number of quick links appears on desktop
  • max quick links mobile: Maximum number of quick links appears on mobile
  • show_for_groups: Required setting. Add the group name for display the sidebar button.
  • aibot_id: Required setting. Add the AI Bot ID which you want to use for this.
  • aibot_username: Required setting. Add the AI Bot username which you want to use for this.
  • aibot_avatar: Required setting. Upload an image for AI Bot which appears on modal.
  • sibebar aibot button postition: Select the position of sidebar button.
    • sidebar-footer-actions (default)
    • before-sidebar-sections (top of the sidebar)
    • after-sidebar-sections (bottom of the sidebar)
  • sibebar aibot button style: Select the style of the sidebar button.
    • btn-primary (default)
    • btn-default
  • sidebar aibot button border-radius: Change the sidebar button rounding.
  • sidebar aibot button before icon: Change the sidebar button icon.
  • aibot recent messages icon: Change the recent conversation button icon.
  • modal background: Change the modal background.
  • modal content wrapper background: Change the modal content wrapper background.
  • modal content wrapper border radius: Change the modal content wrapper rounding.
  • quick buttons style: Select the style of the quick buttons.
    • btn-primary (default)
    • btn-default
  • quick buttons border radius: Change the quick buttons rounding.
  • mobile quick buttons wrapper border radius: Change the quick button wrapper back rounding.
  • aibot avatar spinner primary color: Change the avatar spinner primary color var(--tertiary) by default.
  • aibot avatar spinner secondary color: Change the avatar spinner secondary color #ffffff by default.
  • aibot message border color: This border is on the message right side. var(--tertiary) by default.
  • textarea border-radius: Change the textarea rounding.
  • send button border radius: Change the send button rounding.
  • recent messages button border radius: Change the recent messages button rounding.
  • recent messages button color: Change the recent messages button color. It also change the icon color.
  • recent messages button hover color: Change the recent messages button hover color.
  • recent messages button hover background: Change the recent messages button hover background.
  • recent messages button border: Change the recent messages button border.
  • spinner loader border: Change the modal spinner loader border. It appears when you send the message.
  • spinner loader border right color: Change the spinner loader right side color.

There are some theme translations too…

Theme Translations
  • aibot_modal_title: This is the title of the modal.
  • aibot_message: This is the AI Bot message in the modal.
  • input_placeholder: This is the placeholder in the textarea.
  • input_submit: This is the title of the send button.
  • input_length: This message appears when the text is too short.
  • disclaimer: This text appears under the textarea in the modal.
  • new_question: This is the sidebar button text.
  • recent_messages: This is the modal recent messages button text.

This theme component is hide the share button from AI Bot personal messages. The discourse_ai.ai_bot.default_pm_prefix text is the default ai pm title it will automatically change depends on the conversation subject. You can change it /admin/customize/site_texts

Credit: Discourse Ask Theme

13 Likes