mirror of
https://github.com/discourse/discourse-ai.git
synced 2025-07-24 15:03:26 +00:00
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
326 lines
6.2 KiB
SCSS
326 lines
6.2 KiB
SCSS
// Hide the new question button from the hamburger menu's footer
|
|
.hamburger-panel .ai-new-question-button {
|
|
display: none;
|
|
}
|
|
|
|
body.has-ai-conversations-sidebar {
|
|
.sidebar-wrapper {
|
|
.sidebar-footer-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 0;
|
|
align-items: flex-end;
|
|
width: 100%;
|
|
|
|
.ai-new-question-button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.sidebar-container {
|
|
border: none;
|
|
}
|
|
|
|
// ai related sidebar content
|
|
[data-section-name="ai-conversations-history"] {
|
|
.sidebar-section-header-wrapper {
|
|
pointer-events: none;
|
|
font-size: var(--font-down-1);
|
|
|
|
.sidebar-section-header-caret {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar-section-header-text {
|
|
letter-spacing: 0.5px;
|
|
}
|
|
}
|
|
|
|
.sidebar-section-link-wrapper {
|
|
.sidebar-section-link {
|
|
height: unset;
|
|
padding-block: 0.65em;
|
|
font-size: var(--font-down-1);
|
|
letter-spacing: 0.35px;
|
|
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
|
|
|
.sidebar-section-link-content-text {
|
|
white-space: normal;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar-section-link-prefix {
|
|
align-self: start;
|
|
}
|
|
}
|
|
}
|
|
|
|
// topic elements
|
|
#topic-footer-button-share-and-invite,
|
|
body:not(.staff) #topic-footer-button-archive,
|
|
#topic-footer-buttons .topic-notifications-button,
|
|
.bookmark-menu-trigger,
|
|
.more-topics__container,
|
|
.private-message-glyph-wrapper,
|
|
.topic-header-participants,
|
|
.topic-above-footer-buttons-outlet,
|
|
.topic-map,
|
|
.timeline-ago,
|
|
#topic-footer-buttons .topic-footer-main-buttons details {
|
|
display: none;
|
|
}
|
|
|
|
.topic-timer-info {
|
|
border: none;
|
|
}
|
|
|
|
.topic-owner .actions .create-flag {
|
|
// why flag my own post
|
|
display: none;
|
|
}
|
|
|
|
.container.posts {
|
|
margin-bottom: 0;
|
|
|
|
.topic-navigation.with-timeline {
|
|
top: calc(var(--header-offset, 60px) + 5.5em);
|
|
}
|
|
|
|
.topic-navigation {
|
|
.topic-notifications-button {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
#topic-title {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
|
|
.title-wrapper {
|
|
width: 100%;
|
|
max-width: 960px;
|
|
}
|
|
}
|
|
|
|
.small-action,
|
|
.onscreen-post .row {
|
|
justify-content: center;
|
|
}
|
|
|
|
#topic-footer-buttons {
|
|
width: calc(100% - 6.5em);
|
|
margin-top: 0;
|
|
|
|
@media screen and (max-width: 924px) {
|
|
max-width: unset;
|
|
width: 100%;
|
|
}
|
|
|
|
@media screen and (min-width: 1300px) {
|
|
width: 100%;
|
|
max-width: 51em;
|
|
}
|
|
|
|
.topic-footer-main-buttons {
|
|
justify-content: flex-end;
|
|
|
|
@media screen and (min-width: 1180px) {
|
|
margin-right: 0.6em;
|
|
}
|
|
|
|
@media screen and (max-width: 924px) {
|
|
margin-right: 0.6em;
|
|
}
|
|
}
|
|
}
|
|
|
|
#topic-progress-wrapper.docked {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (max-width: 924px) {
|
|
.archetype-private_message .topic-post:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
nav.post-controls .actions button {
|
|
padding: 0.5em 0.65em;
|
|
|
|
&.reply {
|
|
.d-icon {
|
|
margin-right: 0.45em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topic-footer-main-buttons {
|
|
margin-left: calc(var(--topic-avatar-width) - 1.15em);
|
|
}
|
|
|
|
.ai-bot-conversations {
|
|
height: calc(100dvh - var(--header-offset) - 1.25em);
|
|
|
|
@media screen and (min-width: 675px) {
|
|
border: 1px solid var(--primary-low);
|
|
padding: 2em 2em 3em;
|
|
border-radius: var(--border-radius);
|
|
height: calc(100dvh - var(--header-offset) - 10em);
|
|
}
|
|
|
|
&__persona-selector {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
&__content-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
|
|
&__input-wrapper {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 0.5em;
|
|
width: 100%;
|
|
max-width: 90dvw;
|
|
margin-top: 2em;
|
|
|
|
@media screen and (min-width: 600px) {
|
|
width: 80%;
|
|
max-width: 46em;
|
|
}
|
|
|
|
.btn-primary {
|
|
align-self: end;
|
|
min-height: 2.5em;
|
|
}
|
|
|
|
#ai-bot-conversations-input {
|
|
width: 100%;
|
|
margin: 0;
|
|
resize: none;
|
|
border-radius: var(--d-button-border-radius);
|
|
max-height: 30vh;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: var(--primary-high);
|
|
}
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
margin-bottom: 0.45em;
|
|
max-width: 20em;
|
|
text-align: center;
|
|
font-size: var(--font-up-6);
|
|
line-height: var(--line-height-medium);
|
|
|
|
@media screen and (min-height: 300px) {
|
|
margin-top: -1em;
|
|
}
|
|
|
|
@media screen and (min-height: 600px) {
|
|
margin-top: -3em;
|
|
}
|
|
|
|
@media screen and (min-height: 900px) {
|
|
margin-top: -6em;
|
|
}
|
|
}
|
|
|
|
.ai-disclaimer {
|
|
text-align: center;
|
|
font-size: var(--font-down-1);
|
|
color: var(--primary-700);
|
|
|
|
@media screen and (min-width: 600px) {
|
|
width: 80%;
|
|
max-width: 46em;
|
|
}
|
|
}
|
|
|
|
.sidebar-footer-wrapper {
|
|
display: flex;
|
|
|
|
.powered-by-discourse {
|
|
display: block;
|
|
}
|
|
|
|
button {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// composer
|
|
.reply-details .dropdown-select-box.composer-actions,
|
|
.composer-fields {
|
|
display: none;
|
|
}
|
|
|
|
// hide user stuff
|
|
.new-user-wrapper {
|
|
.user-navigation {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.user-main .about.collapsed-info .details {
|
|
display: none;
|
|
}
|
|
|
|
.user-content {
|
|
margin-top: 0;
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
.share-ai-conversation-button {
|
|
.d-icon {
|
|
margin: 0;
|
|
}
|
|
|
|
.d-button-label {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mobile-view {
|
|
nav.post-controls .actions button.reply .d-icon {
|
|
margin: 0;
|
|
}
|
|
|
|
.search-dropdown {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar-custom-sections {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// custom user card link
|
|
.user-card-meta__profile-link {
|
|
display: block;
|
|
padding: 0.5em 0 0.25em;
|
|
|
|
.d-icon {
|
|
font-size: var(--font-down-1);
|
|
margin-right: 0.15em;
|
|
}
|
|
}
|
|
}
|