UX: Show suggestion buttons only if sufficient content is present (#204)
This commit is contained in:
parent
8d674c451a
commit
0733ff7e67
|
@ -1,5 +1,4 @@
|
|||
import Component from '@glimmer/component';
|
||||
import DButton from "discourse/components/d-button";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { action } from "@ember/object";
|
||||
import { ajax } from "discourse/lib/ajax";
|
||||
|
@ -8,17 +7,21 @@ import didInsert from "@ember/render-modifiers/modifiers/did-insert";
|
|||
import { bind } from "discourse-common/utils/decorators";
|
||||
import { inject as service } from "@ember/service";
|
||||
import I18n from "I18n";
|
||||
import DButton from "discourse/components/d-button";
|
||||
|
||||
export default class AISuggestionDropdown extends Component {
|
||||
<template>
|
||||
<DButton
|
||||
@class="suggestion-button {{if this.loading 'is-loading'}}"
|
||||
@icon={{this.suggestIcon}}
|
||||
@title="discourse_ai.ai_helper.suggest"
|
||||
@action={{this.performSuggestion}}
|
||||
@disabled={{this.disableSuggestionButton}}
|
||||
...attributes
|
||||
/>
|
||||
{{#if this.showAIButton}}
|
||||
<DButton
|
||||
@class="suggestion-button {{if this.loading 'is-loading'}}"
|
||||
@icon={{this.suggestIcon}}
|
||||
@title="discourse_ai.ai_helper.suggest"
|
||||
@action={{this.performSuggestion}}
|
||||
@disabled={{this.disableSuggestionButton}}
|
||||
...attributes
|
||||
/>
|
||||
{{/if}}
|
||||
|
||||
{{#if this.showMenu}}
|
||||
{{! template-lint-disable modifier-name-case }}
|
||||
<ul class="popup-menu ai-suggestions-menu" {{didInsert this.handleClickOutside}}>
|
||||
|
@ -42,6 +45,7 @@ export default class AISuggestionDropdown extends Component {
|
|||
@service dialog;
|
||||
@service site;
|
||||
@service siteSettings;
|
||||
@service composer;
|
||||
@tracked loading = false;
|
||||
@tracked showMenu = false;
|
||||
@tracked generatedSuggestions = [];
|
||||
|
@ -59,21 +63,15 @@ export default class AISuggestionDropdown extends Component {
|
|||
document.removeEventListener("click", this.onClickOutside);
|
||||
}
|
||||
|
||||
get composerInput() {
|
||||
return document.querySelector(".d-editor-input")?.value || this.args.composer.reply;
|
||||
get showAIButton() {
|
||||
const minCharacterCount = 40;
|
||||
return this.composer.model.replyLength > minCharacterCount;
|
||||
}
|
||||
|
||||
get disableSuggestionButton() {
|
||||
return this.loading;
|
||||
}
|
||||
|
||||
closeMenu() {
|
||||
this.suggestIcon = "discourse-sparkles";
|
||||
this.showMenu = false;
|
||||
this.showErrors = false;
|
||||
this.errors = "";
|
||||
}
|
||||
|
||||
@bind
|
||||
onClickOutside(event) {
|
||||
const menu = document.querySelector(".ai-title-suggestions-menu");
|
||||
|
@ -82,7 +80,7 @@ export default class AISuggestionDropdown extends Component {
|
|||
return;
|
||||
}
|
||||
|
||||
return this.closeMenu();
|
||||
return this.#closeMenu();
|
||||
}
|
||||
|
||||
@action
|
||||
|
@ -104,21 +102,53 @@ export default class AISuggestionDropdown extends Component {
|
|||
|
||||
if (this.args.mode === this.SUGGESTION_TYPES.title) {
|
||||
composer.set("title", suggestion);
|
||||
return this.closeMenu();
|
||||
return this.#closeMenu();
|
||||
}
|
||||
|
||||
if (this.args.mode === this.SUGGESTION_TYPES.category) {
|
||||
const selectedCategoryId = this.site.categories.find((c) => c.slug === suggestion).id;
|
||||
composer.set("categoryId", selectedCategoryId);
|
||||
return this.closeMenu();
|
||||
return this.#closeMenu();
|
||||
}
|
||||
|
||||
if (this.args.mode === this.SUGGESTION_TYPES.tag) {
|
||||
this.updateTags(suggestion, composer);
|
||||
this.#updateTags(suggestion, composer);
|
||||
}
|
||||
}
|
||||
|
||||
updateTags(suggestion, composer) {
|
||||
@action
|
||||
async performSuggestion() {
|
||||
if (!this.args.mode) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.composer.model.replyLength === 0) {
|
||||
return this.dialog.alert(I18n.t("discourse_ai.ai_helper.missing_content"));
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
this.suggestIcon = "spinner";
|
||||
|
||||
return ajax(`/discourse-ai/ai-helper/${this.args.mode}`, {
|
||||
method: "POST",
|
||||
data: { text: this.composer.model.reply },
|
||||
}).then((data) => {
|
||||
this.#assignGeneratedSuggestions(data, this.args.mode);
|
||||
}).catch(popupAjaxError).finally(() => {
|
||||
this.loading = false;
|
||||
this.suggestIcon = "sync-alt";
|
||||
this.showMenu = true;
|
||||
});
|
||||
}
|
||||
|
||||
#closeMenu() {
|
||||
this.suggestIcon = "discourse-sparkles";
|
||||
this.showMenu = false;
|
||||
this.showErrors = false;
|
||||
this.errors = "";
|
||||
}
|
||||
|
||||
#updateTags(suggestion, composer) {
|
||||
const maxTags = this.siteSettings.max_tags_per_topic;
|
||||
|
||||
if (!composer.tags) {
|
||||
|
@ -142,43 +172,26 @@ export default class AISuggestionDropdown extends Component {
|
|||
return this.generatedSuggestions = this.generatedSuggestions.filter((s) => s !== suggestion);
|
||||
}
|
||||
|
||||
@action
|
||||
async performSuggestion() {
|
||||
if (!this.args.mode) {
|
||||
return;
|
||||
#tagSelectorHasValues() {
|
||||
return this.args.composer?.tags && this.args.composer?.tags.length > 0;
|
||||
}
|
||||
|
||||
#assignGeneratedSuggestions(data, mode) {
|
||||
if (mode === this.SUGGESTION_TYPES.title) {
|
||||
return this.generatedSuggestions = data.suggestions;
|
||||
}
|
||||
|
||||
if (this.composerInput?.length === 0) {
|
||||
return this.dialog.alert(I18n.t("discourse_ai.ai_helper.missing_content"));
|
||||
}
|
||||
const suggestions = data.assistant.map((s) => s.name);
|
||||
|
||||
this.loading = true;
|
||||
this.suggestIcon = "spinner";
|
||||
|
||||
return ajax(`/discourse-ai/ai-helper/${this.args.mode}`, {
|
||||
method: "POST",
|
||||
data: { text: this.composerInput },
|
||||
}).then((data) => {
|
||||
if (this.args.mode === this.SUGGESTION_TYPES.title) {
|
||||
this.generatedSuggestions = data.suggestions;
|
||||
if (mode === this.SUGGESTION_TYPES.tag) {
|
||||
if (this.#tagSelectorHasValues()) {
|
||||
// Filter out tags if they are already selected in the tag input
|
||||
return this.generatedSuggestions = suggestions.filter((t) => !this.args.composer.tags.includes(t));
|
||||
} else {
|
||||
const suggestions = data.assistant.map((s) => s.name);
|
||||
if (this.SUGGESTION_TYPES.tag) {
|
||||
if (this.args.composer?.tags && this.args.composer?.tags.length > 0) {
|
||||
// Filter out tags if they are already selected in the tag input
|
||||
this.generatedSuggestions = suggestions.filter((t) => !this.args.composer.tags.includes(t));
|
||||
} else {
|
||||
this.generatedSuggestions = suggestions;
|
||||
}
|
||||
} else {
|
||||
this.generatedSuggestions = suggestions;
|
||||
}
|
||||
return this.generatedSuggestions = suggestions;
|
||||
}
|
||||
}).catch(popupAjaxError).finally(() => {
|
||||
this.loading = false;
|
||||
this.suggestIcon = "sync-alt";
|
||||
this.showMenu = true;
|
||||
});
|
||||
}
|
||||
|
||||
return this.generatedSuggestions = suggestions;
|
||||
}
|
||||
}
|
|
@ -339,6 +339,17 @@ RSpec.describe "AI Composer helper", type: :system, js: true do
|
|||
|
||||
expect(ai_suggestion_dropdown).to have_no_dropdown
|
||||
end
|
||||
|
||||
it "only shows trigger button if there is sufficient content in the composer" do
|
||||
visit("/latest")
|
||||
page.find("#create-topic").click
|
||||
composer.fill_content("abc")
|
||||
|
||||
expect(ai_suggestion_dropdown).to have_no_suggestion_button
|
||||
|
||||
composer.fill_content(OpenAiCompletionsInferenceStubs.translated_response)
|
||||
expect(ai_suggestion_dropdown).to have_suggestion_button
|
||||
end
|
||||
end
|
||||
|
||||
context "when suggesting the category with AI category suggester" do
|
||||
|
|
|
@ -3,13 +3,14 @@
|
|||
module PageObjects
|
||||
module Components
|
||||
class AISuggestionDropdown < PageObjects::Components::Base
|
||||
TITLE_BUTTON_SELECTOR = ".suggestion-button.suggest-titles-button"
|
||||
CATEGORY_BUTTON_SELECTOR = ".suggestion-button.suggest-category-button"
|
||||
TAG_BUTTON_SELECTOR = ".suggestion-button.suggest-tags-button"
|
||||
SUGGESTION_BUTTON_SELECTOR = ".suggestion-button"
|
||||
TITLE_BUTTON_SELECTOR = "#{SUGGESTION_BUTTON_SELECTOR}.suggest-titles-button"
|
||||
CATEGORY_BUTTON_SELECTOR = "#{SUGGESTION_BUTTON_SELECTOR}.suggest-category-button"
|
||||
TAG_BUTTON_SELECTOR = "#{SUGGESTION_BUTTON_SELECTOR}.suggest-tags-button"
|
||||
MENU_SELECTOR = ".ai-suggestions-menu"
|
||||
|
||||
def click_suggest_titles_button
|
||||
find(TITLE_BUTTON_SELECTOR, visible: :all).click
|
||||
page.find(TITLE_BUTTON_SELECTOR, visible: :all).click
|
||||
end
|
||||
|
||||
def click_suggest_category_button
|
||||
|
@ -40,6 +41,14 @@ module PageObjects
|
|||
def has_no_dropdown?
|
||||
has_no_css?(MENU_SELECTOR)
|
||||
end
|
||||
|
||||
def has_suggestion_button?
|
||||
has_css?(SUGGESTION_BUTTON_SELECTOR)
|
||||
end
|
||||
|
||||
def has_no_suggestion_button?
|
||||
has_no_css?(SUGGESTION_BUTTON_SELECTOR)
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
Loading…
Reference in New Issue