FEATURE: Experimental Private Message Bot Homepage

[markvanlan]

Overview

This PR introduces a Bot Homepage that was first introduced at https://ask.discourse.org/.

Key Features

• Add a bot homepage: /discourse-ai/ai-bot/conversations
• Display a sidebar with previous bot conversations
  • Infinite scroll for large counts
  • Sidebar still visible when navigation mode is header_dropdown
  • Sidebar visible on homepage and bot PM show view
  • Add New Question button to the bottom of sidebar on bot PM show view
• Add persona picker to homepage

Demo

demo.mov

[keegangeorge]

Was curious about this PR, sorry for being 👃🏽 nosy 😅, I know this is a draft so I won't review everything, but just wanted to suggest something about the lib while it's still in progress.

[keegangeorge]

This is looking REALLY good! 🎉 Nice work @markvanlan / @janzenisaac, thanks guys!

No major concerns, just a bunch of nitpicks here and there.

[tytekkit]

I've gone through and looked at some stying change options. These are small recommendations and not particularly exciting (sorry), but here is what I would do.

Feel free to disagree, it may be out of scope.

Adding box shadow and some adjustments to spacing:

This makes it to where clicking into a message offers the same experience and alignment, (see the red lines). This makes it feel like going from the main page into a conversation is still part of the same page.

However, a downside here is the extra margin on the right of the topic timeline. This is required space and shouldn't be changed, due to complications with our topic timeline within topics.

I only have scratch code for these changes but can move it into the appropriate areas if we like any of these suggestions:

.ai-bot-conversations {
    box-shadow: var(--shadow-card);
    border-radius: var(--d-border-radius) !important;
}

body.has-ai-conversations-sidebar .private_message {
    margin-block: 0 1em;
    padding: 2em 2em 3em;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--primary-low);
    border-radius: var(--d-border-radius) !important;
}

Somewhere --border-radius in this commit needs to be replaced with --d-border-radius, the proper global variable.

This is a bit lighter and alternative. The thinking here is the same as the previous, making inside a conversation feel like the same page as the main query page.

.ai-bot-conversations {
    border: none !important;
}

.ai-conversations-panel .sidebar-section {
    border-top: 1px solid var(--primary-low);
    margin-block: 1em 0;
    
    .sidebar-section-header-wrapper {
        padding-block: 2em;
    }
}

.ai-new-question-button {
    justify-content: start;
    background-color: transparent;
    
    .d-icon {
        color: var(--primary);
    }
}

body.has-ai-conversations-sidebar .private_message {
    padding: 2em 2em 3em;
}

.sidebar-wrapper:has(.ai-conversations-panel) {
    border-right: 1px solid var(--primary-low);
}

Back to Forum is separated a bit from the Conversations list. Since they do very different things, I thought they needed to be moved apart a little bit.

The New Question button has been made lighter. I actually think this might make more sense, having New Question at the top of the conversations list and removing the toggle. If we need a toggle, it would make more sense next to the text CONVERSATIONS instead of "Back to Forum", since it is toggling the Conversations list. But also since we are only toggling one list, I don't think there is a reason to toggle the list and just have it always shown (removing the button).

The thinking of moving the New Question button is following where it is located in ChatGPT, top-left area. You do not have to look far, and it integrates into the conversation list if there aren't many conversations. Users may not notice it separated at the bottom-left of the page, as this area is usually reserved for less common actions. It could be sticky in the top-left too