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
3

That serve of example questions isn’t scrollable on touch screens and shows only two of them on iPhone. Just FYI.

And now I’m just thinking at loud.

That would be appealing way to offer AI for groups that a forum is otherwise denied using AI. Like TL1 for example. But to offer that possibility TL1 must be allowed on settings of DAI, and that shows robot icon too, even in that situation it is unnecessary because of this modal.

1 Like
4

I will check this soon…

It can be disable with ai bot add to header site setting.

5

Nice, but that is not anything else than minor UI question. So no hurry at all.

I know, but that is on/off setting and power users need it, because it is the only way browse different personas. But your modal is for more ordinary end user, or so I see it, and then there is two buttons to do basically same thing, and eating space.

But I don’t know how to handle situation where i.e. lower than TL2 sees the modal, but not the robot icon, and same time some other group, that are members of that i.e. TL1 at same time would not see the modal button and only the robot icon, or both.

That’s why it was only a thought :woozy_face:

I know we can hide a icon using CSS that limits visibility, but honestly, that would lead to awful mess really soon when there is same kind settings and self made components here, there and everywhere.

But I like the modal, because I believe it will lower a barrier of using AI.

1 Like
6

This is fantastic, nicely done @Don !

3 Likes
7

nice interface, i haven’t used it yet but thanks for sharing, if possible i hope to buy you a cup of coffee :smiling_face_with_three_hearts:

1 Like
8

Absolutely, it’s possible, if you wish visit my profile bio. Thanks, I really appreciate it :hugs:

1 Like
9

Fantastic plugin @Don ! Great job… I just installed and noticed on iPhone 13 using Safari and Chrome that the Quick Links set in the Objects Setting Editor are frozen on the screen unless touching the input box, Ask AI Bot. Then you can swipe to access the other questions not initially visible. You can inadvertently click a quick link trying to see the other quick links.

1 Like
10

Thanks Brian, Yeah, I just checked it on my iPhone 6s and that’s not work too well. :slightly_frowning_face: So I’ve decided to drop the scrollable quick buttons. Instead of this I’ve added 2 new settings to control the max quick links on desktop / mobile view and also made some adjustment on modal AI avatar, message section to fits better on smaller screens.

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

Edit: more…

Hope it works better now. :slightly_smiling_face:

2 Likes
11

Great job @Don appreciate your work and support. Well done!

1 Like