mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-06-19 09:49:09 +08:00
96a419887f
Received a few pieces of feedback that the auto-inclusion of semantic search results by the AI plugin can be a little confusing, so this adds a message that explains that it's happening. Full page search... "No exact matches, but here are some related results." This required adding a new plugin outlet `full-page-search-before-results`. : <img width="434" alt="image" src="https://github.com/user-attachments/assets/77793843-762b-424b-beef-e7d1ff7c0481" /> Header search... "N match found - showing related results": <img width="340" alt="image" src="https://github.com/user-attachments/assets/5df5988b-b586-4fce-9b85-30a25098105d" /> I've also added a loading state and hide the 0 results state from the full page search when searching while AI is enabled. These changes help keep the UI less "janky" by avoiding some content shifts and a brief flash of the 0 results state.
154 lines
2.8 KiB
SCSS
Vendored
154 lines
2.8 KiB
SCSS
Vendored
@use "lib/viewport";
|
|
|
|
.semantic-search__container {
|
|
.semantic-search__results {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: baseline;
|
|
|
|
@include viewport.until(sm) {
|
|
margin-top: var(--space-4);
|
|
}
|
|
|
|
.ai-indicator-wave {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.semantic-search {
|
|
&__searching {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&.in-progress,
|
|
&.unavailable {
|
|
.semantic-search__searching-text {
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
.d-icon-discourse-sparkles,
|
|
.d-icon-far-circle-question {
|
|
font-size: var(--font-down-1);
|
|
color: var(--primary-high);
|
|
}
|
|
}
|
|
|
|
&__searching-text {
|
|
margin-left: 8px;
|
|
display: flex;
|
|
gap: var(--space-1);
|
|
align-items: center;
|
|
|
|
.badge-notification {
|
|
top: unset;
|
|
}
|
|
}
|
|
|
|
&__tooltip {
|
|
margin-left: 4px;
|
|
font-size: var(--font-down-1);
|
|
}
|
|
|
|
&__entries {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
body.ai-semantic-search-loading .no-results-container {
|
|
// avoid temporary flash of 0 results
|
|
display: none;
|
|
}
|
|
|
|
.search-results {
|
|
.fps-result {
|
|
.ai-result__icon {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.ai-result {
|
|
border-radius: var(--d-border-radius);
|
|
|
|
.ai-result__icon {
|
|
display: inline;
|
|
margin-right: 0.5rem;
|
|
margin-left: auto;
|
|
font-size: var(--font-up-2);
|
|
color: var(--tertiary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.semantic-search__searching-text {
|
|
.badge-notification.--has-results {
|
|
background: var(--tertiary);
|
|
}
|
|
}
|
|
|
|
.search-filters .advanced-filters {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
align-items: center;
|
|
|
|
@include viewport.until(sm) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.advanced-filters__toggle {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.semantic-search__container {
|
|
justify-self: end;
|
|
|
|
@include viewport.until(sm) {
|
|
justify-self: start;
|
|
}
|
|
}
|
|
|
|
.search-advanced-filters {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
|
|
.ai-search-results-notice,
|
|
.ai-quick-search-notice {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
color: var(--primary-medium);
|
|
font-size: var(--font-down-1);
|
|
}
|
|
|
|
.ai-search-results-notice {
|
|
padding: var(--space-2) 0;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.ai-quick-search-notice {
|
|
padding: var(--space-2) var(--space-4);
|
|
margin-top: var(--space-1);
|
|
}
|
|
|
|
// Hides other buttons and only shows loader
|
|
// while AI quick search is in progress
|
|
.search-input {
|
|
.ai-quick-search-spinner ~ a.clear-search,
|
|
.ai-quick-search-spinner ~ a.show-advanced-search {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@include viewport.until(md) {
|
|
.search-container .search-advanced .semantic-search__container {
|
|
+ .search-info {
|
|
padding-inline: 1rem;
|
|
}
|
|
|
|
&.search-results {
|
|
margin-bottom: 0;
|
|
padding-inline: 1rem;
|
|
}
|
|
}
|
|
}
|
