 |
Summary | AI Bot - New Question Modal |
 |
Repository | GitHub - VaperinaDEV/aibot-new-question-modal |
 |
Install Guide | How to install a theme or theme component |
 |
New to Discourse Themes? | Beginner’s guide to using Discourse Themes |
Install this theme component
Hello 
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.
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.
AI Message: You can use here HTML too.
Quick buttons: Add as many question as you want. The display is limited to 5 and it shuffles when you open again the modal.
On mobile it aligns 
Recent Conversations: This button redirects to the /search page with parameters in:messages, @aibot-username
That’s all for modal. You can change, customize everything in theme settings. 
The AI Bot modal opening button can be place in sidebar 3 points.
-
sidebar-footer-actions
-
before-sidebar-sections
-
after-sidebar-sections
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.
- 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
#ffffffby 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.
Demo
On this video I set to the AI Bot ID and username mine and this is why the message and the search is on my name. 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
